The CSS font-family property
The CSS font-family property sets the typeface for text. You give it a prioritized list — a "font stack" — and the browser uses the first font it can: e.g. font-family: "Helvetica Neue", Arial, sans-serif;. Always end the list with a generic family (sans-serif, serif, monospace) as the final fallback.
Overview
font-family chooses the typeface for an element's text. It is inherited, so setting it once on <body> typically styles the whole page. The twist is that you do not name a single font — you give an ordered list, and the browser walks down it until it finds one that is available.
That list is called a font stack, and the last entry should always be a generic family: sans-serif, serif, monospace, cursive or system-ui. It is the safety net — if every named font is missing, the browser still falls back to something sensible rather than its default. A font name made of more than one word needs quotes, like "Helvetica Neue".
A modern shortcut worth knowing is the system-ui keyword (and the longer stack behind it), which uses whatever native UI font the device ships with — San Francisco on Apple, Segoe on Windows, Roboto on Android. It loads instantly, needs no web-font download, and makes your interface feel at home on every platform. For custom typefaces you load with @font-face or a service, you still list them first and let the stack catch any gaps.
Syntax
selector {
font-family: "Preferred Font", Fallback, generic;
}
/* fast, native-feeling UI text */
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}Values
The font-family property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
family name |
A specific font, e.g. Arial or "Helvetica Neue" (quote multi-word names). |
sans-serif |
Generic fallback for fonts without serifs. The common UI default. |
serif |
Generic fallback for fonts with serifs, like Times. |
monospace |
Generic fallback where every character is the same width — for code. |
system-ui |
The device's native UI font, with no download required. |
Example
<style>
p { margin: 0 0 10px; }
.sans { font-family: system-ui, sans-serif; }
.serif { font-family: Georgia, "Times New Roman", serif; }
.mono { font-family: "Courier New", monospace; }
</style>
<p class="sans">system-ui, sans-serif — clean interface text.</p>
<p class="serif">Georgia, serif — a classic reading face.</p>
<p class="mono">Courier New, monospace — every character the same width.</p>Best practices
- Always end a font stack with a generic family (
sans-serif,serif,monospace) so text never falls back to the browser default. - Quote font names that contain spaces, like
"Helvetica Neue"or"Segoe UI". - Consider
system-uifor interface text — it is instant, needs no download, and feels native on every device. - Keep the number of custom web fonts small; each one is a download that can delay text from rendering.
Accessibility
The typeface affects how easily people can read, so favor clear, well-spaced fonts for body text and avoid decorative or overly thin faces for long passages. Readers with dyslexia in particular benefit from familiar letterforms with distinct shapes, which is part of why plain system fonts work so well.
Just as important is not blocking text while a web font loads. Use font-display: swap so the fallback shows immediately and is replaced when the custom font arrives — that keeps content readable for everyone, including people on slow connections, instead of leaving them staring at invisible text.
Frequently asked questions
How do I change the font in CSS?
font-family with a list of fonts, e.g. font-family: "Helvetica Neue", Arial, sans-serif;. The browser uses the first one it has, falling back down the list.What is a font stack?
font-family value. The browser tries each in turn and uses the first available, ending with a generic family as the last resort.When do I need quotes around a font name?
"Times New Roman" or "Segoe UI". Single-word names like Arial do not need quotes.