This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

font

Summary

The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting.

Overview table

Initial value
normal for font-style, font-variant and font-weight. medium for font-size. normal for line-height. font-family initial value differs depending on the user agent.
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
See the individual properties
Animatable
Yes
CSS Object Model Property
font

Syntax

  • font: font-weight font-style font-variant font-size/line-height font-family
  • font: system font

Values

font-weight font-style font-variant font-size/line-height font-family
font can take up to six separate parts in its value, which set six different longhand property values. The options are as follows:
  • font-weight: Sets boldness of font; can take values of normal (default), bold (standard bold weight), lighter or bolder (supposed to be a slightly lighter or bolder weight that standard bold), inherit, or various numerical values to indicate different degrees of boldness: 100, 200, 300, 400, 500, 600, 700, 800, or 900.
  • font-style: Allows an italic or oblique font face to be applied; values options are normal (default), italic, oblique, or inherit.
  • font-variant: Allows a small caps font variant to be set. Value options are normal (default), small-caps, or inherit.
  • font-size: Sets a size for the font. Options are absolute size keywords (xx-small, x-small, small, medium (the default value), large, x-large or xx-large), relative size keywords (smaller or larger, which indicate a keyword size smaller or larger than the parent element’s font size), length values (for example 12px, or 5rem), percentage values (for example 80%), or inherit.
  • line-height: Sets the height of the line the font is sat on. Value options include normal (the default), unitless values (for example 1.7), length values (for example 20px or 3.5rem), percentage values (for example 120%), or inherit.
  • font-family: Allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character.
system font
Alternatively, you can set the value to be a single keyword that corresponds to a system font used to style a certain feature of the system the browser is running on (some browsers offer more, proprietary options. For more, see the links at the bottom of the document):
  • caption: User-preference font used in objects that have captions—buttons, labels, and so on.
  • icon: User-preference font used in icon labels.
  • menu: User-preference font used in menus.
  • message-box: User-preference font used in dialog boxes.
  • small-caption: User-preference font used in small controls.
  • status-bar: User-preference font used in small controls.

Examples

A selection of examples showing some typical uses of the font property.

.example-one {
  /*    size  family    */
  font: 1.5em sans-serif;
}

.example-two {
  /*    style  variant    weight size/line-height family    */
  font: italic small-caps bold   1em/1.5em        sans-serif;
}

.example-three {
  /*    weight size/line-height family                         */
  font: bold   1em/2em          "Times New Roman", Times, serif;
}

View live example

A couple of theoretical font examples, showing first a font property value with all possible longhand values included, and second, a system default font being used.

.one {
  font: bold italic small-caps 18px/24px georgia;
}

.two {
  font: status-bar;
}

View live example

Notes

  • The font-style, font-variant, and font-weight values may appear in any order before font-size. However, the font-size, line-height, and font-family properties must appear in the order listed. Setting the font property also sets the component properties. In this case, the string must be a combination of valid values for the component properties; only font-family may have more than one value.

If the string does not contain a value for a component property, that property is set to its default, regardless of prior settings for that component property.

Related specifications

CSS Fonts Module Level 3
W3C Working Draft

See also

Related articles

Fonts

External resources

Related pages