CSS Reference Property

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.

Official Syntax

  • Syntax:

    font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
  • Initial: see individual property entries
  • Applies To: all elements
  • Animatable: see individual property entries

Notes

Values of the font-variant property in the shorthand font property can only include those supported in CSS Level 2.1. None of the values added in CSS Level 3 can be used in the shorthand font property. So, the only two values of font-variant property allowed here are normal and small-caps.

Values

When the font property is used as a shorthand property for the individual font-related properties, its unofficial syntax looks like the following:

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

The font-size and line-height values must be separated with a slash (‘/’) character.

<‘font-style’>
See the font-style property entry for a list of possible values.
<‘font-variant’>
See the font-variant property entry for a list of possible values.
<‘font-weight’>
See the font-weight property entry for a list of possible values.
<‘font-stretch’>
See the font-stretch property entry for a list of possible values.
<‘font-size’>
See the font-size property entry for a list of possible values.
<‘line-height’>
See the line-height property entry for a list of possible values.
<‘font-family’>
See the font-family property entry for a list of possible values.

When the font property is used to set a system font, its syntax looks like the following:

font: caption | icon | menu | message-box | small-caption | status-bar
                    
caption
The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
The font used to label icons.
menu
The font used in menus (e.g., dropdown menus and menu lists).
message-box
The font used in dialog boxes.
small-caption
The font used for labeling small controls.
status-bar
The font used in window status bars.

Examples

Using the font property as a shorthand property for the font-related properties:

p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "new century schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }
                

In the second rule, the font size percentage value (80%) refers to the computed font-size of the parent element. In the third rule, the line height percentage (110%) refers to the font size of the element itself.

The first three rules do not specify the font-variant and font-weight explicitly, so these properties receive their initial values (normal). Notice that the font family name “new century schoolbook”, which contains spaces, is enclosed in quotes. The fourth rule sets the font-weight to bold, the font-style to italic, and implicitly sets font-variant to normal.

The fifth rule sets the font-variant (small-caps), the font-size (120% of the parent’s font size), the line-height (120% of the font size) and the font-family (fantasy). It follows that the keyword normal applies to the two remaining properties: font-style and font-weight.

The sixth rule sets the font-style, font-stretch, font-size, and font-family, the other font properties being set to their initial values.

Using the font property to set a system font:

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }
                

If the font used for dropdown menus on a particular system happened to be, for example, “9-point Charcoal”, with a weight of “600”, then <p> elements that were descendants of <button> would be displayed as if this rule were in effect:

button p { font: 600 9pt Charcoal }
                

Because the font shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

button p {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The font property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

Written by

Last updated February 4, 2015 at 3:23 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.