Font Fallback Previewer

Try the Previewer

Why Font Fallbacks Matter

Every web font eventually fails for someone. A slow network, a blocked CDN, a privacy-hardened browser, an ad blocker with aggressive rules: any of these can stop a font file from arriving, and the browser quietly moves on to the next family in your stack. Most sites spend hours choosing the perfect webfont and seconds on the fallback, then discover the fallback choice matters just as much.

The cost of a bad fallback is measurable. If the fallback is wider than the web font, every line of text wraps to more lines, buttons grow, images shift, and the page height jumps when the web font finally loads. Google calls this cumulative layout shift, and it is a ranking factor and a real source of user frustration. The fix is not to avoid webfonts, it is to pick fallbacks whose metrics are close to the webfont, which is what this tool lets you verify.

The numbers matter more than the pixels. A fallback that is 2 percent wider produces a barely visible reflow. One that is 12 percent wider rewraps whole paragraphs. The width and height shift percentages below the preview give you the same scale the performance tools use, so you can set a threshold and hold your stacks to it.

How to Read the Results

The two panels render the same text at the same size. The left panel uses your full stack, exactly as the browser would. The right panel uses only the fallbacks, with the web font stripped out. When the simulate failure toggle is on, the left panel hides its text but keeps its space, which mimics what the browser does before it swaps, except that real browsers paint the fallback immediately rather than leaving a hole.

Below the panels, the width shift is the percent change in line width between the two faces, and the height shift is the percent change in the total block height. Green means under 5 percent, amber means over. A green width shift with an amber height shift usually means the fallback is similar in width but has a taller line height, which is the most common pairing problem after a width mismatch.

Try it with the default stack first: Inter with the system stack as fallback. Then swap the fallback for something wide like a serif, or something narrow, and watch both numbers move. That direct comparison builds the intuition faster than any table of metrics.

Building a Stack That Fails Gracefully

1. Put the web font first, then the system fonts you tested as fallbacks, then the generic family as the last resort.
2. Test the fallback here before you finalize. Aim for under 5 percent shift on both axes at your body size.
3. If you are over, try the nearest system sans for the platform you care most about, then re-measure.
4. For self-hosted fonts, add size-adjust and ascent-override to the font-face rule so the swap is nearly invisible.
5. Re-test at the display sizes too, since large text shifts differently from body text.

The font stack generator builds the starting stack, and the font embed generator produces the link and preload tags. This previewer closes the loop by checking the stack against real rendering before you ship it.

Common Fallback Mistakes

The most common mistake is a stack that ends too early: a webfont followed by nothing but a generic family. The generic sans on the reader's device may be wildly different from the webfont in width and height, guaranteeing a large shift. Naming the system fonts explicitly gives you control over which faces actually render.

The second is testing with short strings. A five-word headline can hide a width mismatch that shows up over a full paragraph. Test with copy as long as your longest real block, which is why this tool defaults to a full paragraph rather than a short specimen.

The third is ignoring line height. Two fonts can have identical average widths and very different default line heights, and the height shift is what rewraps grids and pushes cards around. Read both numbers, not just the width.

A fourth mistake sneaks in with self-hosted setups: loading a font that is nearly identical to the system face, then paying the download and swap cost for no visible gain. If the fallback and the webfont look the same at reading sizes and the shift is under 2 percent, consider dropping the webfont for that weight entirely and saving the request. The previewer makes that call easy, because the two panels show you exactly how much the face you are paying for actually changes the page.

Where This Fits with the Other Tools

Font loading is the delivery layer under everything else the site builds. The font embed generator writes the link tags and preload hints, the font stack generator composes the stack, and this previewer verifies the stack under failure. Once the fonts render, the text measure tool checks line length and the contrast checker checks legibility. The typography playground is where the finished stack meets real copy before export.

FAQ

What happens when a web font fails to load?

The browser skips to the next font in the stack. If your stack has only the web font, it falls back to a generic like sans-serif, and the page renders with that. The text reflows because the fallback has different metrics: wider or narrower glyphs, taller or shorter line boxes. That reflow is the layout shift this tool measures.

Why does my layout shift when the font loads, not just when it fails?

Two rendering strategies cause it. With the default swap behavior, the browser paints the fallback immediately, then swaps in the web font when it arrives. If the web font is wider or narrower, every line moves. The shift on load is the same shift you see here, just in the other direction.

What is size-adjust and how does it help?

Size-adjust is a descriptor on the font-face rule, part of the newer font metrics override family. It scales the web font so its metrics match the fallback, usually within about 1 percent. The trade is that the web font renders at a slightly different size than designed, which is invisible to readers and far better than a visible jump.

Should I use system font stacks instead?

For utilities and dashboards, a system stack is a reasonable choice: no download, no swap, no shift. For brand-forward sites, the web font is worth the swap cost, provided the fallback metrics are close. The font stack generator on this site builds both kinds of stacks.

How do I measure my own fallback?

Paste your stack and text here, read the two numbers, and aim for a width and height shift under 5 percent. If you are over, swap the fallback for a face with closer metrics, or apply size-adjust in your font-face rule and re-test.

Does this tool download the web font?

No. The preview renders with whatever fonts are installed or cached in your browser. If the web font is not present locally, you will see the fallback on both sides, which tells you your own stack is your only real font, a useful fact on its own.