CSS property: font-family

Description

This property specifies a prioritized list of font family names or generic family names.

Unlike other CSS properties, component values are a comma-separated list indicating alternatives. A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered. This allows for differences in available fonts across platforms and for differences in the range of characters supported by individual fonts.

Syntax

font-family: [ <name> | <generic> ] [, <name> | <generic>]*;

Values

<name>

The name of a font family.

<generic>

These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted. Authors are encouraged to append a generic font family as a last alternative for improved robustness.

serifGlyphs of serif fonts, as the term is used in CSS, have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the sans-serif generic font family. CSS uses the term ‘serif’ to apply to a font for any script, although other names may be more familiar for particular scripts, such as Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). Any font that is so described may be used to represent the generic serif family.
sans-serifGlyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain -- without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the serif family. CSS uses the term sans-serif to apply to a font for any script, although other names may be more familiar for particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim (Korean). Any font that is so described may be used to represent the generic sans-serif family.
cursiveGlyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Some scripts, such as Arabic, are almost always cursive. CSS uses the term cursive to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.
fantasyFantasy fonts are primarily decorative fonts that contain playful representations of characters. These do not include Pi or Picture fonts which do not represent actual characters.
monospaceThe sole criterion of a monospace font is that all glyphs have the same fixed width. This is often used to render samples of computer code.

Versions

Examples

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