In this section, we will learn what the font property is and how to use it in CSS.

CSS font Property Definition and Usage

The CSS `font` property is a shorthand property that we can use to set the values for the following properties:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Out of these properties, only font-size and font-family properties are required and the rest are just optional.

If we ignore the values for the other optional properties, their default values will be used instead.

CSS font Property Syntax

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

CSS font Property Value

As mentioned before, the font property is a shorthand one that is used for setting the values for a couple of fonts related properties. Hence, those values that we are allowed to set for each of these properties could also be used for the `font` property as well.

Example: arial font bold

See the Pen arial font bold by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS shorthand font

See the Pen CSS shorthand font by Enjoy Tutorials (@enjoytutorials) on CodePen.