font

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:

Syntax

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

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.

System font values

caption

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

icon

The system font used to label icons.

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 definition

Initial valueas each of the properties of the shorthand:
Applies toall elements and text. 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
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'> ] |
<system-family-name>

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

<font-variant-css2> =
normal |
small-caps

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

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

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

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

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

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

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

<length-percentage> =
<length> |
<percentage>

<family-name> =
<string> |
<custom-ident>+

<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>

<generic-script-specific> =
generic( kai ) |
generic( fangsong ) |
generic( nastaliq )

<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace

<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded

Examples

Setting font properties

css
/* 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
CSS Fonts Module Level 4
# font-prop

Browser compatibility

BCD tables only load in the browser

See also