font-family
The font-family property specifies a prioritized list of font names and a generic fallback family.
Syntax
font-family: 'Name', generic-family;
Examples
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
code { font-family: ui-monospace, 'SF Mono', monospace; }
Output
Renders body text in the OS native UI font and code in the system monospace font.
Notes
Always end with a generic family (sans-serif, serif, monospace, system-ui). Quote names containing spaces. The system-ui keyword uses the platform default for a native feel and zero load cost.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |