Introduction of CSS Font Properties

Through CSS you can change the size, style, weight, line-height, etc. of fonts. A separate property has been created for all these changes. Let us know about these properties.

font-family Property

To set the font’s family of any HTML element, you use the font-family property. You give the name of any font family as the value of this property.

The following is a list of some font families that you can use as values.

  • Verdana
  • Arial
  • Courier
  • serif

Let us try to understand the font family property with an example.

<html>
<head>
<title>Font Family Property Demo</title>
<style>
p
{
   font-family:Arial;
}
</style>
</head>
<body>
<h1>Font Family Example of Experts Tool</h1>
<p>This font will be shown in Arial in Experts tool. </p>
</body>
</html>

font-style Property

With the help of CSS, you use font-style property to change font style. The values ​​of this property can be normal, italic and oblique. The example is given below.

<html>
<head>
<title>Font style Property Demo </title>
<style>
h1
{
    font-style:italic;
}
</style> 
</head>
<body>
<h1>This heading will be in italic in Experts Tool.</h1>
<p>This is an example of font style property and this is a paragraph.</p>
</body>
</html>

font-weight property

With this property you can define the weight of the font. This property defines how bold the font will be. The values ​​of this property can be bold, bolder and lighter. You can also define a custom font weight. An example of this is given further.

<html>
<head>
<title>font-weight property</title>
<style>
p
{
    font-weight:bold;
} 
</style> 
</head>
<body>
<p>This is an example of font weight</p>
</body>
</html>

font-size property

Through this property you can change the font size of any HTML element. You can give the value of this property in pixels and also in%. The example is given below.

<html>
<head>
<title>font size property demo </title>
<style>
h1
{
    font-size:20px;
}
p
{
    font-size:12px;
}
</style>
</head>
<body>
<h1> This is heading</h1>
<p>This is a paragraph</h1>
</body>
</html>