font-family

The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a “family”, and thus may be dependent on other typographic property values to select the correct face within the family.

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

A value can be one of the following:

• A font family name that matches a font that is embedded on the page or available on the user’s system.
• A series of family names, separated by commas, which can include a generic family name

If multiple family names are used, the browser will select the first one it finds either embedded on the page using @font-face or installed on the user’s operating system.

For font-family there is no specific default or initial value; the initial value always depends on the browser and/or operating system.

Generic Family Names

If multiple values are used for a single declaration, it is recommended to have a generic family listed last as a fallback to ensure the best typographic experience:

code {
    font-family: Courier, Monaco, monospace;
}

In the above example, “Courier” and “Monaco” are real family names of actual fonts, whereas “monospace” is just a generic reference to any font installed on the user’s system that’s monospaced.

If the first two are not found installed, the browser will select the best option, but only from monospace fonts. Without the generic family, the font would default to whatever is the default font on the user’s system (likely a serif or sans-serif), which would be undesirable.

Generic family names include serif, sans-serif, cursive, fantasy, and monospace.

If a family name matches a generic family name, the family name should be quoted to indicate that it is not generic.

Multi-word Family Names

If a family name contains multiple words, separated by spaces, it is recommended to list the family name in quotation marks (single or double):

code {
    font-family: "Times New Roman", Georgia, serif;
}

This isn’t always necessary, but it is generally safer to include the quotes for any family name that has spaces or special characters.

Related Properties

• font
• font-stretch
• font-variant
• font-style
• font-weight
• line-height
• font-size

Browser Support