CSS font shorthand property

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

Here is an example of a CSS font shorthand property …

font: italic small-caps bold 16px/1.2em Arial, Helvetica, sans-serif;

In the full context, here it is styling the body element …

css font property

css font property

The font property should be in this order …


So the above rule is equivalent to …

css font properties

css font properties

When using font shorthand property, you need to make sure you include the font-size and the font-family otherwise the entire line is invalidated.  For example, at minimum, you need …

font: 26px sans-serif;

The other values are optional.

The exception to that is that you can use …

font: caption;
font: small-caption;
font: icon;
font: menu;
font: message-box;
font: status-bar;

These sets the font to be like the system font used by those elements.

Note that if you have CSS overrides, the  font line will override the entire font line.  Consider this case …

css font override

css font override

It will not just override the properties found in the second line.  In other words, the <p> will no longer have the italics and small-caps.  Because “font-style” was omitted in the second font line, the font-style defaulted to “normal”.

The possible values for “font-style” are “normal” (default), “italic”, “oblique”, and “inherit”.

The possible values for “font-variant” are “normal” (default), “small-caps”, and “inherit”.

The possible values for “font-weight” are “normal”, “bold”, “bolder”, “lighter”, “inherit”, and 100, 200, 300, 400, 500, 600, 700, 800, 900.