font

The font property is a shorthand property for setting longhand properties: font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family at the same place in the style sheet.

If any of the above longhand properties is omitted from the shorthand property, then the omitted longhand property’s value is set to its individual initial value. Whatever property value declared in the font shorthand property (even if its the initial value) overrides any value declared before the shorthand property declaration.

Regarding font-size-adjust: The definition of the font-size-adjust property makes sure that it is backwards compatible (see the property entry for details). In order to preserve the backwards compatibility of the property, it is not possible to set it inside the font shorthand; instead, you should use the individual property.

Regarding font-stretch: Since the font-stretch property was not defined in CSS 2.1, when using it in the font shorthand you should also include an extra version of the font declaration that is compatible with older browsers that don’t support the font-stretch property. For example:

p {
  font: 80% sans-serif;             /* for older browsers */
  font: condensed 80% sans-serif;   /* includes `condensed` font-stretch value */
}
                

Using font For Setting System Fonts

The font property is also a way to set an element’s font to a system font, using predefined keywords.

The keywords used for setting system fonts on an element are: caption, icon, menu, message-box, small-caption, and status-bar.

Each of these keywords represents a system font category. Using any of these keywords will set the font of the element to the font used by the operating system for that certain category. For example, font: menu will apply the same font to the element as the font used for menus in the operating system.

System fonts can only be set using the font property, and not using the font-family property.

Moreover, system fonts may only be set as a whole; that is, the font family, size, weight, style, etc. are all set at the same time. These values may then be altered individually if desired. If no font with the indicated characteristics exists on a given platform, the browser should either intelligently substitute (e.g., a smaller version of the ‘caption’ font might be used for the ‘small-caption’ font), or use a browser-default font.

.element {
    font: status-bar;
}
                

These keywords are not to be used in conjunction with other properties that can be set in the font shorthand property; they are always used on their own and set the font declaration as a whole. If you want to change the font size, weight, style, etc. of the system font you chose, you will need to do that using the individual font properties, and not inside the font property.

Note that the keywords used for the system fonts listed above are only treated as keywords when they occur in the initial position, in other positions the same string is treated as part of the font family name:

font: menu;        /* use the font settings for system menus */
font: large menu;  /* use a font family named "menu" */
                

Trivia and Notes

As you can see, the font property is more than just a shorthand property, as it can do more than what the individual properties combined can do.

It is important to note that there are certain gotchas to keep in mind when using the font shorthand property.

• The font-size and font-family values are mandatory. Omitting any of these two values makes the font shorthand declaration invalid and hence it will be ignored by the browser.
• The value of the font-family property must come at the end of the font property declaration, otherwise, again, the declaration is considered invalid.
• If you set the values of the font-style, font-variant, and font-weight properties, their values must come before the value of the font-size property, otherwise they will be ignored and may also cause mandatory values (see above) to be ignored as well. Their values can be placed in any order as long as they come before the font-size property.
• If you set the line-height property value in the font shorthand, its value must come directly after the value of the font-size property, and they must be separated by a mandatory slash (‘/’) character. If the line-height property is omitted, the slash character must be omitted too, otherwise the entire font declaration will be ignored.
• Even though the values of the font-stretch, font-size-adjust, and font-kerning properties are not directly set in the font property, their values are reset to their initial values when the font shorthand property is used.