How to set all the font properties in one declaration using CSS?

CSS or Cascading Style Sheets, is a powerful tool that provides a range of properties for aligning and positioning fonts on a web page. The font declaration property is one of the many properties available in CSS. In CSS, all font properties can be set in one declaration using the shorthand property. This property allows specifying the font style, variant, weight, size, line height, family, text decoration, and text transform all in one line of code.

Setting Font Properties in CSS

CSS provides a variety of font properties for styling text, which are used to style text on a web page, like font-family, font-size, font-style, font-weight, line-height, text-decoration, text-transform, and font-variant.

Syntax of the CSS font Shorthand Property

The font shorthand property is used to set all font properties in one declaration. The syntax for the font shorthand property is as follows −

css selector {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

In the above syntax,

• Font-style − This property sets the font style, such as normal, italic, or oblique.

• Font-variant − This property sets the font variant, such as normal or small-caps.

• Font-weight − This property sets the font weight, such as bold or normal.

• Font-size − This property sets the font size in pixels, ems, or other units.

• Line-height − This property sets the line height, which is the space between lines of text.

• Font-family − This property sets the font family, such as Arial, Times New Roman, or a custom font.

Setting Font Family Using the Font Property

In CSS, the font-family property is used to specify the font family of the text. This can be a specific font name or a generic font family such as sans-serif, serif, or monospace. The font family is set by adding the font-family property to the end of the font declaration, for doing this we use the font shorthand property. For example −

body {
   font: normal normal 400 16px/1.5 Arial;
}

In the above example, we have set the set the font family to “Arial”

Setting Font Size Using the Font Property

The font-size property is used to specify the size of the text. This can be a specific size, such as 16px, or a relative size such as larger or smaller. The font size is set by adding the font-size property to the end of the font declaration, for doing this we use the font shorthand property. For example −

body {
   font: normal normal 400 16px/1.5 Arial;
}

In the above example, we have set the font size to “16px”.

Setting Font Style Using the Font Property

The font-style property is used to specify the style of the text, such as italic or normal. The font style is set by adding the font-style property to the beginning of the font declaration, for doing this we use the font shorthand property. For Example −

body {
   font: italic normal 400 16px/1.5 Arial;
}

In the above example, we have set the font style to “italic”.

Setting Font Weight Using the Font Property

The font-weight property is used to specify the weight of the text, such as bold or normal. The font weight is set by adding the font-weight property to the third position in the font declaration, for doing this we use the font shorthand property.

body {
   font: normal normal bold 16px/1.5
}

In the above example, we have set the font weight to “bold”.

Setting Line Height Using the Font Property

The line-height property is used to specify the spacing between lines of text. The line height is set by adding the line-height property after the font size in the font declaration, for doing this we use the font shorthand property. It is separated by a forward slash. For example −

body {
   font: normal normal bold 16px/1.5
}

In the above example, we have set the line height to “1.5”.

Setting Font Variants Using the Font Property

The font-variant property is used to specify the font variant, such as small-caps or normal. The font variant is set by adding the font-variant property after the font style in the font declaration, for doing this we use the font shorthand property. For example −

p {
   font: normal small-caps bold 24px/1.5 Arial;
}

In the above example, we have set the font-variant to “small-caps”.

Additionally, we can use the text-transform property and the text-decoration property to set the text transform and text decoration.

After understanding how to set each font property using the Font Shorthand property. Now, let's look at an example of how to combine all of them.

Example 1

In the example below, we have set the font style to italic, the font variant to small-caps, the font weight to bold, the font size to 16px with a line height of 1.5, the font family to Georgia, serif, and the text transform to capitalize.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font: italic small-caps bold 16px/1.5 Georgia serif capitalize;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
   <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>

Example 2

Here is another example to set all the font properties in one declaration using CSS.

<!DOCTYPE html>
<html>
<head>
   <title>Blur Effect Example</title>
   <style>
      h1 {
         font: normal normal bold 36px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      h2 {
         font: italic normal 400 24px/1.5 "Times New Roman", Times, serif;
      }
      p {
         font: normal normal 400 18px/1.5 "Open Sans", sans-serif;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>

Conclusion

The font shorthand property in CSS provides a simple and efficient way to set multiple font properties in a single line of code. By using the font shorthand property, we can specify the font style, variant, weight, size, line height, family, text decoration, and text transform all in one declaration.