font property

Definition and Usage

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.

As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.

Note: There are few caveats when using the CSS font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.

• Except when using a keyword, it is mandatory to define the value of both the font-size and the font-style properties.
• Not all values of font-variant are allowed. Only the values defined in CSS 2.1 are allowed, that is normal and small-caps.
• Though not directly settable by font, the values of font-stretch, font-size-adjust and font-kerning are also reset to their initial values.
• The order of the values is not completely free: font-style, font-variant and font-weight must be defined, if any, before the font-size value. The line-height value must be defined immediately after the font-size, preceded by a mandatory /. Finally the font-family is mandatory and must be the last value defined (inherit value does not work).

• Initialthe concatenation of the initial values of its longhand properties:
  • font-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • font-variant: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • font-weight: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • font-stretch: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • font-size: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • line-height: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • font-family: is itself a shorthand, its initial value is the concatenation of its own longhand properties
• Applies toall elements
• Inheritedyes
• PercentagesThe values of its longhand properties the percentage value belongs to:
  • 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
• Animatableas each of the properties of the shorthand:
  • font-style: no
  • font-variant: no
  • font-weight: yes, as a font weight
  • font-stretch: yes, as a font stretch
  • font-size: yes, as a length
  • line-height: yes, as a number, a length
  • font-family: no
• Canonical orderorder of appearance in the formal grammar of the values

---

Syntax

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

---

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-size’>

See the font-size CSS property.

<‘line-height’>

See the line-height CSS property.

<‘font-family’>

See the font-family CSS property.

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

Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:

caption	The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon	The font used to label icons.
menu	The font used in menus (e.g., dropdown menus and menu lists).
message-box	The font used in dialog boxes.
small-caption	The font used for labeling small controls.
status-bar	The font used in window status bars.

Browsers implementing these often implement several more, prefixed, values; Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.

---

Examples

---

Compatibility

Desktop browsers

Mobile browsers