Tools

Font Stack Generator

A font stack generator builds a font-family declaration from a primary web font, a chain of OS fallbacks, and a generic family. A good font stack keeps text readable the moment the web font fails to load, and the only way to make that fallback feel invisible is to pick system fonts whose metrics and character match the primary.

Stack settings

Pick the primary font. Fallbacks are added by category.

Primary font

Categorysans-serif

SourceGoogle Fonts

Variableyes

Italic style

Adds font-style: italic and loads the italic face.

Add a custom fallback

Live preview

Rendered with the full stack. If the web font has not finished loading, you are seeing the fallback chain.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Five quacking zephyrs jolt my wax bed.

Loading web font...

Fallback chain

Each entry in the stack, in evaluation order, with the reason it is there.

InterPrimary
Fallback from the sans-serif stack.
system-ui
The user's OS UI font. Similar neutral character to most sans-serif web fonts.
-apple-system
macOS and iOS UI font (San Francisco).
Segoe UI
Windows default UI sans.
Roboto
Android default UI sans.
Helvetica Neue
macOS and iOS legacy system sans.
Arial
Universal sans available on every OS. Last resort before the generic.
sans-serif
The generic family. The browser always has one.

Export

Copy the stack as a CSS rule, a Google Fonts link, a @font-face snippet, or a Tailwind config entry.

tokens.css

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

Loading the font stack generator...

How to Build a Font Stack

A font stack is the list of font names in a font-family declaration, evaluated left to right. The browser tries the first font that is installed and available. If the web font is still downloading or its host is unreachable, the browser falls back to the next entry without reflowing the layout.

A reliable stack has three layers. The first entry is the primary web font, in quotes, with its exact family name. The middle entries are operating-system fonts that look similar: system-ui for the user's UI font, Segoe UI on Windows, Roboto on Android, Helvetica Neue on macOS and iOS. The last entry is a generic family (serif, sans-serif, monospace) that the browser always understands. The MDN reference on font-family documents this evaluation order, and web.dev's font best practices recommend keeping the stack short and matching the primary's category to its fallbacks.

Match the primary to its fallbacks by category. A sans-serif primary like Inter should fall back to system-ui and Segoe UI, not to Georgia. A serif primary like Playfair Display should fall back to ui-serif and Georgia. A monospace primary should fall back to ui-monospace and SFMono-Regular. The generator on this page picks those fallbacks for you from the primary's category.

Related Tools

Inspect the file you plan to self-host, browse the catalog the generator pulls from, or drop the stack into a real layout in the playground.

Font inspector Font catalog Typography playground