CSS font

<!doctype html>
<title>Example</title>
<style>
p { 
  font: italic normal 300 1.8em/1.5em Helvetica, sans-serif; 
  }
</style>
<p>Auctor augue mauris augue neque gravida in fermentum. Tortor at risus viverra adipiscing at in tellus.</p>

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

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:

font-style: normal
font-variant: normal
font-weight: normal
font-stretch: normal
font-size: medium
line-height: normal
font-family: depends on the user agent

Applies To

All elements

Inherited?

Yes

Media

Visual

Animatable

Yes (see example)

Example Code

Here are some examples of valid font declarations.

Official Specifications

CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)