CSS font

The CSS font property is a shorthand property for setting seven other font properties at once.

The CSS font property allows you to set values for the following properties:

This saves time and space as you don't need to set each one separately.

You can also use the font property to specify system fonts instead of the other font properties.

Syntax

font: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch' ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

Possible Values

All subproperties of the font property are first reset to their initial values, including those listed above plus font-size-adjust, font-kerning, subproperties of font-variant and and font-language-override. Then, the following properties are explicitly set to the values provided.

font-style
Sets the value of the font-style property.
font-variant-css21
Sets the value of the font-variant property. Note that you can only set the CSS2.1 values for this property (either normal or small-caps). None of the values added in CSS3 can be used in the font shorthand property.
font-weight
Sets the value of the font-weight property.
font-stretch
Sets the value of the font-stretch property.
font-size
Sets the value of the font-size property.
line-height
Sets the value of the line-height property.
font-family
Sets the value of the font-family property.
System Font Keywords

You can also specify a keyword that represents a specific system font. Here are the keywords that can be used for this purpose:

caption
Specifies font properties for captioned controls. For example, buttons, drop-downs, etc.).
icon
Specifies font properties for label icons.
menu
Specifies font properties for menus. For example, dropdown menus and menu lists.
message-box
Specifies font properties for dialog boxes.
small-caption
Specifies font properties for labeling small controls.
status-bar
Specifies font properties for window status bars.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
Based on the individual properties. These are:
Applies To
All elements
Inherited?
Yes
Media
Visual
Animatable
Yes (see example)

Example Code

Here are some examples of valid font declarations.

/* Set font-size and font-family */
p { 
  font: 180% cursive; 
  }
  
/* Set font-size, line-height, and font-family */
p { 
  font: 12pt/14pt Garamond, serif; 
  }

/* Set font-size, line-height, and font-family */
p { 
  font: x-large/110% "Goudy Oldstyle", serif; 
  }
  
/* Set font-weight, font-style, font-size, and font-family */
p { 
  font: bold italic 5vw Baskerville, serif; 
  }
  
/* 
Set font-weight and font-style to 'normal'. 
Then set font-variant, font-size, and font-family 
*/
p { 
  font: normal small-caps 2em fantasy; 
  }
  
/* Set font-stretch, font-size, line-height, and font-family */
p { 
  font: condensed 2em/1.3em "Helvetica Neue", sans-serif; 
  } 
  
/* Use a keyword to set the font to the 'menu' system font */
nav { 
  font: menu; 
  }

Official Specifications