Font Stack Generator
Pick a system or web-safe font stack, preview it in your own fonts, and copy a font-family value with a guaranteed fallback — entirely on this device.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif- Added a generic "sans-serif" fallback at the end so text renders even if none of the named fonts are installed.
Press ? for shortcuts
Do it offline:$ node -p '["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Ubuntu","Cantarell","Helvetica Neue","Arial","sans-serif"].map(n=>n.includes(" ")?`"${n}"`:n).join(", ")'
How to use it
- Choose a stack — the sans-serif, serif, monospace and display & script groups cover the modern system families and the web-safe trios.
- Edit the sample text; the preview restyles in the exact font-family the tool will hand you.
- Optionally prepend up to four of your own fonts — a self-hosted or web font wins wherever it is present.
- Read the coverage row to see which desktop and mobile platforms ship at least one named font.
- Copy the font-family value, or download a one-line .css file for your stylesheet.
Pick a system or web-safe font stack and copy a CSS font-family value that ends in a guaranteed generic fallback, so text always renders. The previews use your device's own fonts, because the browser is the renderer. Nothing is fetched or uploaded — every stack resolves on this device.
How it works
A font-family value is an ordered list: the browser renders text in the first family the device has, so earlier names are preferences and later ones fallbacks. Every stack here ends in one of the six resolvable generics — serif, sans-serif, monospace, cursive, fantasy or system-ui — appended automatically so text never falls through to nothing.
Names are quoted only when they must be. A bare identifier like Roboto or -apple-system stays unquoted, while a multi-word name — Segoe UI, Times New Roman — takes double quotes, the form the CSS Fonts grammar expects. Generic and vendor keywords are never quoted: quoting one would make it a request for a specific family and break the fallback.
Because these stacks reuse fonts already on the reader's system, applying one costs no network request, no flash of unstyled text, and no layout shift for a late webfont. That is the point of a system-font stack, and why the preview is honest — it renders your installed fonts.
Examples
System UI stack-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serifThe classic cross-platform native stack: -apple-system and BlinkMacSystemFont reach the macOS and iOS system face, Segoe UI covers Windows, Roboto Android, Ubuntu and Cantarell common Linux desktops, then sans-serif closes it.
Monospace Code stackui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospaceLed by the ui-monospace keyword, which resolves to the platform's own code face, then Cascadia Code, Menlo and Consolas. ui-monospace is generic-like but not a terminator, so a plain monospace is appended last.
Neo-Grotesque, prepend InterInter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serifPrepending Inter — already in the neo-grotesque stack — moves it to the front and drops the later duplicate, so it appears exactly once; sans-serif is still guaranteed at the end.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
Generics are never quoted
sans-serif and serif are keywords, not family names. Quoting one asks for an installed font named sans-serif, so the generics stay bare.
-apple-system stays unquoted
The vendor keywords -apple-system and BlinkMacSystemFont read oddly but are valid CSS identifiers; quoting either would stop it resolving to the system UI face.
A generic is always appended
A plain generic terminator is added at the end and flagged with a note, so text stays readable on a device that has none of the named fonts.
ui-monospace is not a terminator
The ui- keywords map to a platform face but are not universal, so they never end a stack; a plain monospace or sans-serif still follows as the safety net.
No monospace, monospace hack
An old workaround repeated the keyword to dodge a browser bug that shrank code text. That bug is long fixed, so no stack here doubles the generic.
A custom font is not hosted
Adding a font name only writes it into the list — it loads nothing. It renders where the reader has it or your stylesheet loads it; a note flags names outside the system set.
Coverage is a hint, not a probe
The platform chips come from hand-maintained metadata, not from inspecting the visitor's machine — live detection is unreliable and a fingerprinting risk. The preview is the real test.
Common errors
Commas separate families — a name can't contain one.- The field takes one family at a time; a comma is how CSS separates the list itself, so a comma-joined value is refused, not split.
Enter a font name.- An empty or whitespace-only entry adds nothing to the stack, so the field asks for a real name first.
A font name can't be longer than the 64-character limit for this tool.- Names past 64 characters are refused whole, not trimmed — a cut-off name would point at a different family, and none come near the cap.
FAQ
What is a CSS font stack?
A CSS font stack is the ordered value of the font-family property: preferred typefaces, then a generic keyword. The browser paints with the first family the device has and treats the rest as fallbacks, so the last entry always resolves.
Do these font stacks download any web fonts?
No. Each stack uses typefaces that ship with common operating systems plus a generic fallback, so applying one makes no font download and no external request. A hosted typeface goes in as a custom font, loaded with your own @font-face rule.
Should I quote font names in font-family?
Quote a name with spaces, or one that is not a single valid identifier — "Segoe UI" — and leave one-word names and generic keywords unquoted. The tool applies that rule for you, so the value you copy is already correct.
Keyboard shortcuts
- ⌘/Ctrl + Enter
- Reset the preview text to the sample pangram (the value already refreshes on every change).
- ⌘/Ctrl + C
- Copy the font-family declaration while nothing is selected; a focused text field is never intercepted.
- ⌘/Ctrl + Shift + C
- Copy the font-family declaration even over an active selection.
- ⌘/Ctrl + S
- Download the declaration as a .css file, overriding the browser's save dialog.
- t
- Cycle the color theme (ignored while a field has focus).
- ? or ⌘/Ctrl + /
- Open the keyboard-help dialog for this stack builder.
- Esc
- Close the topmost dialog without changing the stack.