font-family

Summary

The font-family CSS descriptor allows authors to specify the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support
the first font, it tries the next font.

There are two types of font family names:

• family-name - The name of a font-family, like "times", "courier", "arial", etc.
• generic-family - The name of a generic-family like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want but always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Syntax

font-family: font|initial|inherit;

Values

family-name
generic-family
A prioritized list of font family names and/or generic family names.

initial
Sets this property to its default value.

inherit
Inherits this property from its parent element.

serif
Generic font with serif like Times for example.

sans-serif
Generic font without serif like Arial for example.

fantasy
Fantasy generic font.

monospace
Monospaced generic font like Courier for example.

cursive
Generic font simulating handwritting like Script for example. 

Formal syntax

<family-name>
where 
<family-name> = <string> | <IDENT>+

Examples

For an example, consider the Garamond font family in its normal form. We will get the following result:

p {
    font-family: "Times New Roman", Georgia, Serif;
}

Specifications

Browser compatibility