CSS Font Property

CSS Font Shorthand

Font shorthand property is used to shorthand the code.

Till now we were writing font property each time separately when we had to use - font-size, font-family etc.

But there is a way to write code in shorthand with the followed Syntax -

Syntax -

font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];

You can have all your font-related styles in one declaration with the font shorthand.

Simply use the font property, and put your values in the correct order.

For example, to make all p elements bold with a font size of 20px and use Arial as the font family typically you would code is as follows -

p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}

However with the font shorthand it can be condensed as follows -

p {
font: bold 20px Arial, sans-serif;

}

Initial value for each of the properties -

font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
font-family – depends on user agent

Note -

That since font-style, font-variant, font-weight and line-height are optional, the three of them are skipped in this example. It is important to note that using the shortcut resets the other attributes not given. Another important point is that the two necessary attributes for the font shortcut to work are font-size and fontfamily. If they are not both included the shortcut is ignored.