The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

Try it

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-size-adjust and font-kerning are also reset to their initial values.

Constituent properties

This property is a shorthand for the following CSS properties:


/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;

/* font-size/line height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;

/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;

/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/* system font */
font: caption;

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
  • font-stretch may only be a single keyword value.
  • line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
  • font-family must be the last value specified.



See the font-style CSS property.


See the font-variant CSS property.


See the font-weight CSS property.


See the font-stretch CSS property.


See the font-size CSS property.


See the line-height CSS property.


See the font-family CSS property.

System font values


The system font used for captioned controls (e.g., buttons, drop-downs, etc.).


The system font used to label icons.

The system font used in menus (e.g., dropdown menus and menu lists).


The system font used in dialog boxes.


The system font used for labeling small controls.


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 definition

Initial valueas each of the properties of the shorthand:
Applies toall elements and text. It also applies to ::first-letter and ::first-line.
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
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:

Formal syntax

font = 
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |

<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?

<font-variant-css2> =
normal |

<font-weight> =
<font-weight-absolute> |
bolder |

<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |

<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |

<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>

<font-family> =
[ <family-name> | <generic-family> ]#

<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |

<font-weight-absolute> =
normal |
bold |
<number [1,1000]>

<length-percentage> =
<length> |

<family-name> =
<string> |

<generic-family> =
generic( <custom-ident>+ ) |
<string> |


Setting font properties

/* 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


CSS Fonts Module Level 4
# font-prop

Browser compatibility

BCD tables only load in the browser

See also