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

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 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, as the individual properties (see example)

Example Code

Here are some examples of valid font declarations.

Official Specifications

CSS Fonts Module Level 4 (W3C Working Draft)
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)

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.