font-family

font-family supplies an ordered list of font families. Browsers choose an available face that matches the requested style and weight, and can fall back again for individual missing characters. A list does not download the fonts it names.

Compare generic families

The same sentence uses serif, sans-serif, and monospace. The exact fonts depend on the browser, operating system, and reader’s settings; the generic names do not promise identical pixels everywhere.

<p class="serif">Read the smallest working example.</p>
<p class="sans">Read the smallest working example.</p>
<p class="mono">Read the smallest working example.</p>

.serif {
  font-family: serif;
}
.sans {
  font-family: sans-serif;
}
.mono {
  font-family: monospace;
}
p {
  font-size: 1rem;
}

Choose separate prose and code fallbacks

The prose prefers Georgia where available, while code uses a monospace fallback. The family with spaces is quoted; the generic keywords are not.

<article>
  <h2>A practice note</h2>
  <p>Change <code>display: grid</code> and compare the layout.</p>
</article>

article {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}
code {
  font-family: ui-monospace, monospace;
}

Values and inheritance

Font-family is inherited and its initial family is chosen by the browser. Family names are comma-separated; quote names containing spaces or punctuation for clarity. Generic families such as serif, sans-serif, monospace, and system-ui are unquoted keywords. Quoting “serif” requests a family literally named serif instead.

System-ui selects the platform’s interface font. Test long prose and every supported writing system rather than assuming that choice is ideal for all content. Newer generics have their own compatibility requirements.

Missing fonts and changing layout

Unavailable families fall through the list. Missing glyphs can use another font even when the preferred family is installed. A web font also needs a valid @font-face resource and the appropriate weight/style descriptors. Fallback metrics can change line wrapping while a font loads.

Learn font-display, font-weight, and font-family examples. Check actual text and user settings rather than promising cross-platform consistency.

Sources and browser support

MDN: font-family describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.