font-family
The font family, with a list of fallbacks.
Syntax
font-family: font, fallback;Values
| Parameter | Type | Description |
|---|---|---|
| name | text | A font name; names with spaces go in quotes: `'Times New Roman'`. |
| serif | sans-serif | monospace | keyword | A generic family — any font of that kind available on the device. |
| system-ui | keyword | The font of the operating system interface. |
Examples
Fonts with a generic family as the fallback:
<p style="font-family: Georgia, serif;">Georgia, serif</p>
<p style="font-family: Arial, sans-serif;">Arial, sans-serif</p>
<p style="font-family: 'Courier New', monospace;">Courier New, monospace</p>The system font, as many sites use:
<style>
body { font-family: system-ui, sans-serif; }
</style>
<p>The operating system's interface font.</p>Notes
The browser takes the first font from the list that it has, so always end the list with a generic family. To use a font the user may not have installed, load it with @font-face.
See also
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
- font-size — The size of the font.
- @font-face — Loads a font and gives it a name to use in `font-family`.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.