CSS font-family Property

The CSS font-family property specifies the font or list of fonts used to display text in an element.

A font family can be a specific typeface, such as Arial or Georgia, or a generic family, such as serif or sans-serif. Providing several fonts creates a font stack that gives the browser alternatives when the preferred font is unavailable.

font-family Syntax

The font-family property accepts one or more font family names separated by commas. The browser tries each font in the order listed until it finds one that is available.

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

In this example, the browser first tries Arial. If Arial is unavailable, it tries Helvetica. If neither font is available, the browser uses its default sans-serif font.

Font Stacks

A list of font families used as fallback choices is commonly called a font stack. Font stacks help text remain readable and maintain a similar appearance when the preferred font is not installed or cannot be loaded.

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

Fonts are listed from the most preferred to the least specific fallback. A font stack should normally end with an appropriate generic font family so the browser always has a final category from which to choose a font.

Generic Font Families

Generic font families do not identify a particular font. Instead, they describe a general type of font and allow the browser or operating system to select an available typeface from that category.

Generic Family	Description
`serif`	Fonts with decorative strokes or finishing marks on characters.
`sans-serif`	Fonts without decorative strokes on characters.
`monospace`	Fonts in which characters generally occupy the same horizontal width.
`cursive`	Fonts designed to resemble handwriting or script.
`fantasy`	Decorative fonts intended primarily for expressive or display text.
`system-ui`	Uses the default user interface font of the operating system or platform.

The exact typeface used for a generic family can vary between browsers, operating systems, and user settings.

Font Family Names

Font family names that contain spaces should be placed inside quotation marks.

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

Single-word family names do not normally require quotation marks.

p {
  font-family: Georgia, serif;
}

Generic family names such as serif, sans-serif, and monospace are CSS keywords and should not be placed inside quotation marks.

Inheriting font-family

The font-family property is inherited, so a font applied to a parent element is normally used by its descendant text unless another rule specifies a different font.

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

Setting a font family on the body element is a common way to establish the primary font for a webpage without repeating the same declaration for every text element.

font-family Example

Use the font selector in the example to compare how the same text appears with different font families.

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

Play in Editor

Try each option and notice that the text content remains the same while the typeface used to display it changes.