How does a browser choose from a font stack?

Per character and left to right. For each glyph the browser tries the first family, then the next, and so on until one resolves; the generic family at the end guarantees that something always does. That is why a stack can look correct for months and then show a fallback for a single character.

Why put the generic family last?

Because everything after it is unreachable. A generic family always resolves, so an entry listed after sans-serif never gets a chance. That is also why the emoji tail is appended after the generic family in this tool: the emoji families are reached for characters the earlier entries cannot supply.

What does the emoji fallback add?

Three colour-emoji families appended to the chain. Without them a pictogram outside the text face can render as a blank box, depending on the platform. With them the character resolves to a coloured glyph, at the cost of three entries that most stacks never need to use.

Does the fallback affect layout?

It can. Each family has its own metrics, so text rendered in the second face occupies different line lengths and heights from the same text in the first. Matching those metrics is what the size-adjust descriptor is for; a stack cannot do it, since the chain has no place to state a size adjustment.

When do I need to quote a family name?

Whenever the name contains a space or a word that could be read as a keyword. Quoting is always safe, so the tool quotes every named family. The one case worth care is a name that also matches a generic family, such as a family literally called monospace, which needs quoting to be treated as a name.

CSS Font Stack Builder

Stack

Primary faceFallback face (optional)Generic familyPreview textAppend emoji fallbacks

Quoted family names, comma-separated, generic family last, emoji tail optional.

Faces in stack5

Terminal familysans-serif

Primary kindsans

Preview

Racira Fonts — stack preview

The quick brown fox jumps over the lazy dog — 0123456789 — the fallback chain only shows through when the primary face is missing a glyph or fails to load.

font-family

font-family: 'Inter', sans-serif, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';

You Might Also Need

System Font Stack Generator

Generate system font stacks

CSS Variable Font Builder

Build variable font CSS

@font-face Generator

Generate @font-face rules

Font Loading Strategy Builder

Plan font loading strategy

The CSS font stack builder assembles a font-family declaration in the order it is read: primary face, optional second face, generic family, and an optional emoji tail. The chain only ever shows itself when something is missing, which is exactly when it matters.

What is CSS Font Stack Builder?

The CSS font stack builder assembles a font-family declaration from four slots and previews it on real text. The order is the whole structure, and each slot has a job.

Primary face, chosen from the catalogue and quoted with its own stack, so the declaration can be pasted into any project.
An optional second face for the fallback chain, reduced to a bare family name so it does not drag the first face's generic families along with it.
The generic family last, which is the promise the browser can always keep: sans-serif, serif, monospace, system-ui or cursive.
An optional emoji fallback of three colour-emoji families, appended after the generic family so a glyph that no text face carries still renders as an emoji.

A font stack is read left to right, and each entry is tried per character rather than per page. That is why the chain is invisible most of the time and suddenly visible in three situations: the primary face has not loaded yet, it is missing a glyph the copy needs, or it fails to load at all. The generic family at the end is not decoration — it is the entry that decides which metric the browser falls back to, so choosing serif under a sans primary produces a visibly different page during the swap period.

The panel reports the face count, the terminal family and the primary face's category, which together answer the question the declaration raises: how far does this chain have to stretch. The emoji tail is a good example of a decision that costs nothing when it is not needed and rescues a page when it is: a dingbat, a flag or a pictogram outside the text face renders as a coloured glyph rather than a blank box. The exported declaration is a single font-family line, and the preview shows the stack at two sizes, since a fallback that reads acceptably at 28 pixels can look wrong at 15.

Four limits come with a one-line declaration, and each one explains why a particular problem moves to another tool.

It cannot express a unicode-range, so a stack cannot tell the browser which characters should come from which face; that belongs in the at-rules for the webfont.
It offers no metrics matching, so a fallback with different proportions still shifts the layout when the primary lands, which is a job for the size-adjust descriptor.
The catalogue is the only source of faces, so a project with a licensed family pastes the declaration and edits the first entry by hand.
The emoji fallback is all or nothing: three entries are added or none, so a page that needs a single symbol family carries the whole group.
Nothing limits the length of the chain, and a stack can grow until no one can say what each entry contributes, which is the failure this tool exists to make visible.

What it does not need to do is verify anything: the declaration is valid CSS whatever the faces are, and the browser resolves it at render time. The discipline is in the order and in quoting names that contain spaces or a reserved word, which is the one place a hand-written stack usually breaks.

How to use CSS Font Stack Builder

Choose the primary face and note the category the panel reports, since that is the metric the generic family should match.
Add a second face only if there is a specific gap to fill, and check the face count readout rather than extending the chain for its own sake.
Set the generic family to match the primary's category, then decide whether the emoji fallback is worth its three entries.
Copy the declaration and paste it into the stylesheet, then confirm in the browser that a missing glyph and a blocked webfont both land where the chain intends.

When to use CSS Font Stack Builder vs related tools

Reach for it when a font stack has grown by accident and nobody can say what each entry is for, when a page shows blank boxes for a symbol the text face lacks, or when a webfont swap has to be made less jarring and the generic family is the only lever available. The order is the transferable lesson. For the metric matching that removes the jump, the CSS variable font builder covers size-adjust; the system font stack generator builds the zero-download alternative, and the font-face generator writes the declarations the stack refers to.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.