font (CSS property)

Spec
Inherited Initial Version
Yes CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

font: { [ font-style ]   [ font-variant ]   [ font-weight ]  font-size [ /line-height ]  font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit } ;

Description

This property sets the font size and the font family, plus, optionally, the font style, font variant, font weight, and line height, for an element’s text content.

Example

This style rule sets some font properties for the element with ID "sidebar":

#sidebar {
  font: bold small-caps 0.8em/1.4
  ➥    Helvetica, Arial,
  ➥    "Luxi Sans", sans-serif;
}

This style rule sets the font for the class "dialog" to be the system font used for dialog boxes, but changes the font size to twice that of the parent element’s:

.dialog {
  font: message-box;
  font-size: 200%;
}

Value

The font size and font family must be specified for the rule to be parsed correctly. Omitting them is a syntax error and the whole rule should then be ignored. The font style, variant, and weight may be specified (in arbitrary order) before the font size. The line height may be specified, preceded by a slash character, between the font size and the font family.

Any omitted value will be set to its initial value, not its inherited value. See the individual properties for information on their initial values.

As an alternative to the aforementioned syntax, the value can be specified using one of the special keywords for system fonts. These keywords imply all of the font properties in one go, and can’t be combined with other property values such as a font weight or font size, although those traits can be modified in subsequent declarations. The keywords are:

caption
selects the font used for captioned controls such as buttons
icon
selects the font used to label icons
menu
selects the font used in menus
message-box
selects the font used in dialog boxes
small-caption
selects the font used for labeling small controls, or a smaller version of the caption font
status-bar
selects the font used in window status bars

Note that the system fonts can only be set with this shorthand property; not with the font-family property.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#4
Contributed:
by jvalade
Date:
Fri, 11 Feb 2011 06:23:21 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

When you search for the word font in the search field, you get no results.

ID:
#3
Contributed:
by 4SeeN
Date:
Thu, 18 Nov 2010 07:42:40 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Any chance of getting the font example with every value specified as one line?

ID:
#2
Contributed:
by Louis Lazaris
Date:
Thu, 25 Jun 2009 05:56:49 GMT

I think it should be noted here that if one of the two mandatory values are left out, the entire line will become nullified, which is different from omitting the optional values.

Also, different browsers will respond differently if the line-height is omitted but a slash is left accidentally after the font-size value.

Related Products