font-family (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-family: { family name,… | inherit } ;

Description

The property font-family sets a prioritized list of font family names and/or generic family names to be used to display a given element’s text content.

A user agent will use the first family that’s available. Since there’s no guarantee that any particular font will be available, a generic family name should always be the last value in the list.

Note that it’s meaningless to list any font family names after a valid generic family name, since the latter will always match an available font.

While an element’s font-family value will be inherited if it’s not explicitly specified, if it is specified, and none of the specified font families match an available font (this case only arises if the list doesn’t include a generic family name), the resulting property value will default to the user agent’s initial value, not the value inherited from the parent element, as you might expect.

Example

This style rule sets the list of font families to be used for the root element, and, through inheritance, all elements in a given HTML document (unless overridden). If Helvetica isn’t available, the user agent will try Arial. If Arial isn’t available, Luxi Sans will be tried. If none of the font families are available, the user agent will resort to its default sans-serif font family:

html {
  font-family: Helvetica, Arial,
  ➥    "Luxi Sans", sans-serif;
}

Value

Note that the values are separated by commas, not the spaces that are used in most other CSS properties. Comma separators are used because the values are alternatives—at most, one of them will be used.

The values are either font family names or generic family names. Font family names are quoted or unquoted strings, while generic family names are keywords and shouldn’t be quoted.

It’s a good idea to quote any font family name that contains spaces or other non-alphanumeric characters. Special characters must be escaped if the value isn’t quoted. Whitespace characters will be ignored at the beginning or end of an unquoted name, and multiple white space characters inside the name will collapse to a single space.

Also, if a font family name happens to be the same as a generic family name or any other CSS keyword, it must be quoted to avoid confusion.

Note that font family names may be case sensitive on some operating systems. Generic family names, being CSS keywords, are always case insensitive.

CSS2.1 defines five generic family name keywords:

  • cursive (a cursive script font)
  • fantasy (a special, decorative font)
  • monospace (a monospaced font)
  • sans-serif (a sans-serif font)
  • serif (a serif font)

Those generic family names are mapped to actual font families by the user agent. Most browsers allow the user to modify this mapping via software preferences or options.

The initial value for this property depends on the user agent.

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:
#3
Contributed:
by craiga
Date:
Sun, 16 Mar 2008 02:36:28 GMT

When specifying fonts for browsers on Mac OS X, take care to specify both the name and the 'full' name of the font. The full name of the font can be discovered by selecting a font in Mac OS X's Font Book, then selecting Preview > Show Font Info (or by hitting Command-I).

I discovered this while trying to specify the font "Brush Script MT". In Firefox 2.0.0.12, fonts must be specified using their full font name (i.e. "Brush Script MT Italic"). In Safari, this will not work -- you must specify the font name as "Brush Script MT".

Related Products