Font Stack
An ordered list of fonts in the font-family property, used as fallbacks when the primary font is unavailable.
Plain English
A font stack is your font's safety net. You specify your ideal font first, then a close alternative, then a generic category like "sans-serif" or "serif" as the final fallback. If the user's browser can't load Inter (maybe they are offline, or blocking Google Fonts), it tries Helvetica Neue next, then Arial, then whatever the OS default sans-serif is. A good font stack is invisible — users never notice it working.
Technical
Defined in the font-family CSS property as a comma-separated list. Fonts with spaces must be quoted. The browser tries fonts in order and uses the first available. Generic families (serif, sans-serif, monospace, cursive, system-ui, ui-sans-serif, ui-serif, ui-monospace) are always available as the final fallback. System font stack (system-ui, -apple-system, etc.) avoids loading any external font by using the OS default.
Live Demo
Font stack categories
The quick brown fox jumps over the lazy dog.
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifThe quick brown fox jumps over the lazy dog.
font-family: Georgia, 'Times New Roman', serifconst greeting = "Hello, world!";
font-family: 'SF Mono', 'Fira Code', monospaceSystem font stacks avoid FOUT, load instantly, and respect the user's OS preferences.
Usage
✓ Good usage
Write font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif so users on any OS get a clean, readable sans-serif regardless of whether Inter loads.
✗ Bad usage
Specifying only one font (font-family: 'Inter') with no fallbacks — if the web font fails, the browser defaults to serif Times New Roman, causing a jarring layout shift.
Recommended values
- System stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif — fastest, no FOUT
- Inter stack: 'Inter', 'Helvetica Neue', Arial, sans-serif
- Serif stack: 'Playfair Display', Georgia, 'Times New Roman', serif
- Monospace stack: 'JetBrains Mono', 'Fira Code', Menlo, monospace
Common mistakes
- No fallback fonts — a failed web font load renders Times New Roman.
- Choosing fallbacks that are very different in width from the primary — causes severe layout shift on font swap.
- Forgetting quotes around font names with spaces (e.g., Helvetica Neue needs quotes).
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Set font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif for body text, and font-family: 'Playfair Display', Georgia, serif for display headings. Include a system-font fallback at the end of every stack.