Font Stack Generator
Browse and copy CSS font-family stacks for system fonts, serifs, monospace, and more.
The quick brown fox jumps over the lazy dog
Uses the platform's native UI font — zero download, familiar to users on every OS.
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
The quick brown fox jumps over the lazy dog
Organic letterforms with a friendly tone; a readable alternative to geometric sans.
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
The quick brown fox jumps over the lazy dog
Clean circles and straight lines; modern branding and headlines.
font-family: Futura, 'Century Gothic', 'Trebuchet MS', sans-serif;
The quick brown fox jumps over the lazy dog
Space-efficient for data tables, captions, and sidebars.
font-family: 'Arial Narrow', 'Franklin Gothic Medium', Arial, sans-serif;
The quick brown fox jumps over the lazy dog
Classic editorial look — great for long-form reading.
font-family: Georgia, 'Times New Roman', Times, serif;
The quick brown fox jumps over the lazy dog
Elegant Old Style serifs; editorial and luxury feel.
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
The quick brown fox jumps over the lazy dog
Bold, blocky serifs; great for headlines and retro branding.
font-family: 'Rockwell', 'Courier Bold', Courier, Georgia, Times, serif;
The quick brown fox jumps over the lazy dog
Fixed-width; the standard for code blocks, terminals, and data.
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
The quick brown fox jumps over the lazy dog
Soft rounded letterforms; friendly and approachable tone.
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, 'Arial Rounded MT Bold', sans-serif;
The quick brown fox jumps over the lazy dog
Decorative accent text — use sparingly for short headings.
font-family: 'Brush Script MT', 'Segoe Print', 'Bradley Hand', cursive;
CSS font stacks explained
A font stack is a comma-separated list of fonts in the font-family CSS property. The browser uses the first font it can find, falling back through the list until it reaches a generic keyword (sans-serif, serif, monospace). System font stacks like system-uiload instantly because they use fonts already installed on the user's OS — ideal for UI text where performance matters. For custom web fonts (Google Fonts etc.), pair the stack with a @font-face declaration. To build a full design token system with font choices and colors, try the CSS Variables Generator.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Getting a system font stack that avoids a webfont download entirely.
- Producing a fallback chain for a chosen webfont.
- Comparing serif, sans and monospace system stacks.
- Building a stack that looks native on every platform.
- Getting a stack to paste rather than remembering the platform names.
Frequently Asked Questions
- Why does a font stack need fallbacks?
- Because the first choice may fail to load or be unavailable, and the browser walks the list until something works. A stack ending in a generic family guarantees text renders rather than falling back to a default nobody chose.
- What is a system font stack?
- A list naming each platform's native UI font — `-apple-system`, `Segoe UI`, `Roboto` and so on. It loads instantly because nothing is downloaded, and it makes an interface feel native on every platform.
- Do the generic families matter?
- Yes — `serif`, `sans-serif`, `monospace`, `system-ui` are the final fallback and respect the user's own browser preferences. Omitting one means the browser picks its default instead of the category you intended.
- Why do font names sometimes need quotes?
- When they contain spaces or would otherwise be ambiguous. `"Times New Roman"` needs them; a single-word name does not, though quoting consistently is harmless and avoids the question.
- How do fallback metrics cause layout shift?
- Because a fallback with different proportions occupies different space, so text reflows when the webfont arrives. `size-adjust` and the `ascent-override` descriptors exist to tune a fallback to match.
Common errors and gotchas
- Omitting a generic family at the end, which leaves the browser no final fallback.
- Choosing fallbacks with very different metrics, which causes a visible shift when the webfont loads.
- Assuming a font is installed everywhere, when availability varies by platform and version.
- Quoting font names inconsistently, which breaks names containing spaces.
- Putting the generic family first, which means nothing after it is ever used.