font

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Shorthand 1.0 (Yes) 1.0 (1.0) 3.0 3.5 1.0 (85)
System fonts 1.0 (Yes) 1.0 (1.0) 4.0 6.0 1.0 (85)
Support of font-stretch values (Yes) ? 43 (43) ? ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
Support of font-stretch values ? ? 43 (43) ? ? ?