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.


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.

Sets the value of the font-style property.
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.
Sets the value of the font-weight property.
Sets the value of the font-stretch property.
Sets the value of the font-size property.
Sets the value of the line-height property.
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:

Specifies font properties for captioned controls. For example, buttons, drop-downs, etc.).
Specifies font properties for label icons.
Specifies font properties for menus. For example, dropdown menus and menu lists.
Specifies font properties for dialog boxes.
Specifies font properties for labeling small controls.
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:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
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
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