The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords.

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* The font used in system dialogs */
font: message-box;
font: icon;

/* Global values */
font: inherit;
font: initial;
font: unset;

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font, the longhands font-stretch, font-size-adjust, and font-kerning are also reset to their initial values.

Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Percentagesas each of the properties of the shorthand:
  • font-size: refer to the parent element's font size
  • line-height: refer to the font size of the element itself
Mediavisual
Computed valueas each of the properties of the shorthand:
  • font-style: as specified
  • font-variant: as specified
  • font-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  • font-stretch: as specified
  • font-size: as specified, but with relative lengths converted into absolute lengths
  • line-height: for percentage and length values, the absolute length, otherwise as specified
  • font-family: as specified
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Syntax

The font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

If font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar.

If font is specified as a shorthand for several font-related properties, then:

  • it must include values for:
  • it may optionally include values for:
  • font-style, font-variant and font-weight must precede font-size
  • font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
  • line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
  • font-family must be the last value specified.

Values

<'font-style'>
See the font-style CSS property.
<'font-variant'>
See the font-variant CSS property.
<'font-weight'>
See the font-weight CSS property.
<'font-stretch'>
See the font-stretch CSS property.
<'font-size'>
See the font-size CSS property.
<'line-height'>
See the line-height CSS property.
<'font-family'>
See the font-family CSS property.
caption
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
The system font used to label icons.
menu
The system font used in menus (e.g., dropdown menus and menu lists).
message-box
The system font used in dialog boxes.
small-caption
The system font used for labeling small controls.
status-bar
The system font used in window status bars.
Prefixed system font keywords
Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.

Formal syntax

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

where
<font-variant-css21> = [ normal | small-caps ]

Examples

/* Set the font size to 12px and the line height to 14px.
   Set the font family to sans-serif */
p { font: 12px/14px sans-serif }

/* Set the font size to 80% of the parent element
   or default value (if no parent element present).
   Set the font family to sans-serif */
p { font: 80% sans-serif }

/* Set the font weight to bold,
   the font-style to italic,
   the font size to large,
   and the font family to serif. */
p { font: bold italic large serif }

/* Use the same font as the status bar of the window */
p { font: status-bar }

Live sample

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font' in that specification.
Candidate Recommendation Added support for font-stretch values.
CSS Level 2 (Revision 1)
The definition of 'font-weight' in that specification.
Recommendation Added support for keywords.
CSS Level 1
The definition of 'font' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1 (Yes)133.51
System fonts1 (Yes)1461
Support for font-stretch values (Yes) ?43 ? ? ?
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support (Yes) (Yes) (Yes)4 (Yes) (Yes) (Yes)
System fonts ? ? ? ? ? ? ?
Support for font-stretch values ? ? ?43 ? ? ?