B.38. font-family

This property lets you set the typeface used to display text in an element. Like the HTML font tag, this property lets you specify a list of fonts, each of which will be tried in order.

If the first font is not available on the user's system, or if a particular character is not present in the font, the browser will check the second font in the list, and so on. This per-character fallback method (which is specified only as of CSS2, and is therefore not yet supported in all browsers) lets you create multilingual content and then list a font for each language; the browser should pick and choose characters from the fonts in the list, always giving preference to those listed first.

Any time you set this property, the font list should end with a generic font name (see below), so that the browser will always have some idea of the type of font you're after.

Be aware that browsers will not fall back on fonts specified in lower-priority style rules. For example, if you set paragraph elements to Verdana, sans-serif and paragraphs of class note to Myriad, a user that does not have Myriad installed will see paragraphs of class note displayed in the browser's default font, not Verdana. In this example, you should set paragraphs of class note to Myriad, Verdana, sans-serif to achieve the desired effect.

Inherited: Yes

See also: Section B.37font

B.38.1. Value

A comma-separated list of font names. Font names that contain spaces should be quoted (e.g. "Times New Roman").

In addition to actual font names, the list can contain any of the following generic font names:

• serif

  The browser selects a font with serifs.^[5].

  ^[5] Serifs are those little horizontal flares that you see at the tops and bottoms of vertical lines in fonts like Times New Roman.

• sans-serif

  The browser selects a font without serifs.

• cursive

  The browser selects a handwritten font.

• fantasy

  The browser selects an elaborate, stylized font.

• monospace

  The browser selects a font where all characters have the same dimensions—suitable for showing code.

Since browsers will always be able to find a font for each of these generic font names, it only makes sense for the last font in the font-family list to be one of these.

Initial value: browser specific

B.38.2. Compatibility

CSS Version: 1

All CSS-compatible browsers, including Netscape 4, Internet Explorer 4, and Mozilla browsers.

B.38.3. Example

This style rule assigns a very common set of fonts to the body of the document:

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}