font

The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration.

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}
 */

There are seven font sub-properties, including:

• font-stretch: this property sets the font width, such as condensed or expanded.
  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
• font-style: makes the text appear italicised or oblique.
  • normal
  • italic
  • oblique
  • inherit
• font-variant: changes target text to small caps.
  • normal
  • small-caps
  • inherit
• font-weight: sets the weight or the thickness of the font.
  • normal
  • bold
  • bolder
  • lighter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • inherit
• font-size: sets the height of the font.
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller, larger
  • percentage
  • inherit
• line-height: defines the amount of space above and below inline elements.
  • normal
  • number (font-size multiplier)
  • percentage
• font-family: definies the font that is applied to the element.
  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • "string"

Font Shorthand Gotchas

The font property is not as straightforward as other shorthand properties, partly due to the syntax requirements for it, and partly due to inheritance issues.

Here is a summary of some of the things you should know when using this shorthand property.

Mandatory Values

Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored.

Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.

Optional Values

All five of the other values are optional. If you include any of font-style, font-variant, and font-weight, they must come before font-size in the declaration. If they aren’t, they will be ignored and may also cause the mandatory values to be ignored.

body {
    font: italic small-caps bold 44px Georgia, sans-serif;
}

In the above example, three optionals are included. As long as these are defined before font-size, they can be placed in any order.

Including line-height is likewise optional but may be declared only after font-size and only following a forward slash:

body {
    font: 44px/20px Georgia, sans-serif;
}

In the above example, the line-height is “20px”. If you omit line-height, you must also omit the slash, otherwise the entire line will be ignored.

Using font-stretch

The font-stretch property is new in CSS3 so if it is used in an older browser that doesn’t support font-stretch in font shorthand, it will cause the entire line to be ignored.

The spec recommends including a fallback without font-stretch, like this:

body {
    font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */
    font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;
}

Inheritance for optionals

If you omit any of the optional values (including line-height), the omitted optionals will not inherit values from their parent element, as is often the case with typographical properties. Instead, they will be reset to their initial state.

For example:

body {
    font: italic small-caps bold 44px/50px Georgia, sans-serif;
}

p {
    font: 30px Georgia, sans-serif;
}

In this case, the optional values (italic, small-caps, and bold) are placed on the font declaration on the element. These will also apply to most child elements.

However, because we’ve redeclared the font property on the paragraph elements, all the optionals will be reset on the paragraphs, causing the style, variant, weight, and line-height to revert to their initial values.

Keywords for Defining System Fonts

In addition to the above syntax, the font property also allows use of keywords as values. They are:

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

These keyword values set the font to the one that is used on the user’s operating system for that particular category. For example, defining “caption” will set the font on that element to use the same font that is used on the operating system for captioned controls (buttons, drop-downs, etc).

A single keyword comprises the entire value:

body {
    font: menu;
}

The other properties mentioned earlier are not valid in conjunction with these keywords. These keywords can only be used with font shorthand and cannot be declared using any of the individual longhand properties.

Related Properties

• font-stretch
• font-variant
• font-style
• font-weight
• line-height
• font-size
• font-family
• OS specific fonts in CSS

More Information

• W3C Spec
• CSS-Tricks article: px – em – % – pt – keyword
• Jonathan Snook: font size with rem
• A Primer on the CSS Font Shorthand Property
• CSS Font Shorthand Property Cheat Sheet

Browser Support