Which font display value should I start with?

Swap for body copy, because the reader sees text immediately and the cost is one reflow. Block suits a display heading where a flash of the wrong face would be worse than a brief blank, but it is a poor choice for a paragraph since the text can stay invisible for seconds. Optional is the safest for performance and the least predictable, since a slow first visit never shows the webfont at all.

How accurate is the shift estimate?

It is a convention rather than a measurement. Without the two font files the tool cannot know how their metrics differ, so it uses the three to six percent line-height difference that typically separates a webfont from a system fallback, and reports four percent per swapped block. Treat the total as a way of comparing strategies and page shapes, not as a score a browser would agree with.

What actually stops the text from moving?

Making the fallback occupy the same space as the webfont. Three things do that: preloading the file so it arrives early, subsetting it so it arrives small, and overriding the fallback's metrics with size-adjust, ascent-override and descent-override. The metric overrides are the ones that remove the reflow properly, and they are written by the declaration builder for exactly this purpose.

Why does block show no shift?

Because nothing is drawn until the file arrives, so there is no fallback rendering to move. That is the trade: the shift is zero and the reader may wait up to three seconds looking at empty space. The estimate reflects the missing movement, not a recommendation, which is why the verdict line calls block unsuitable for body copy.

Does the number of blocks really multiply the shift?

Roughly, and it is the reason the control exists. Each paragraph that reflows contributes its own movement, so a long article carries far more of it than a landing page with two lines. A browser aggregates the score differently, measuring the movement of content around the viewport, so the multiplication is a way of comparing a template's risk rather than predicting a number.

Web Font Tester

Font & strategy

Web font

font-display

swap (fallback first, then swap)block (invisible up to 3s)fallback (100ms, then fallback)optional (skip on slow links)

Sample text

Sizepx

Text blocks on screen

Strategyswap

Estimated shift per block±4% line height

Total shift risk12.0% across 3 block(s)

Before the webfont arrives (fallback)

The quick brown fox jumps over the lazy dog

After the webfont arrives

The quick brown fox jumps over the lazy dog

Text visible immediately; one layout shift when the webfont lands. Swap only works in your favour when the two faces have similar line-height metrics — otherwise the paragraph jumps by exactly the amount estimated above.

· Preload the file used above the fold; defer the rest.
· Subset to the characters a page actually uses.
· Tune `size-adjust`, `ascent-override` and `descent-override` to match the fallback metrics.

css output

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
}

.text-block { font-family: 'Manrope', sans-serif; font-size: 1.2500rem; }

You Might Also Need

Font Loading Strategy Builder

Plan font loading strategy

Font Face Declaration Builder

Build @font-face rules

Font CSS Generator

Generate font CSS quickly

Font Rendering Preview

See anti-aliasing and rendering

The web font tester previews the two states a reader can actually see, the fallback before the file arrives and the loaded state after it, and reports the layout shift each font display strategy costs. The choice is made on that trade-off rather than on the loaded state alone.

What is Web Font Tester?

The web font tester renders one sample twice, once in a system fallback and once in the chosen face, and pairs that with the layout shift cost of the four font display strategies across the text blocks on a page.

Swap shows the fallback immediately and swaps when the file lands, which is the strategy with one visible reflow.
Block holds the text invisible for up to three seconds while the file loads, which removes the reflow at the cost of a blank paragraph.
Fallback takes a hundred-millisecond blocking period and then uses the fallback permanently if the file has not arrived.
Optional uses the webfont only when it is already cached or the connection is fast, which costs nothing for a returning visitor.
The font display value and the selected face are written into a complete at-rule, with the source path derived from the family name and a weight range of 300 to 700.

The shift figures are the reason the panel exists. A webfont and a system fallback rarely share line-height metrics, and the conventional difference sits between three and six percent per line, so the tool estimates a four percent shift per block for swap, one and a half percent for fallback, none for block because nothing is rendered until the file arrives, and four percent for optional on the first visit. Multiplying that by the number of blocks on screen produces the total shift risk, which is the shape of the problem rather than a measurement: a page with twelve paragraphs carries twelve times the movement of a page with one. The panel then states the three fixes that actually reduce it, which are preloading the file used above the fold, subsetting to the characters the page uses, and tuning the fallback metrics with size-adjust and the two metric overrides so the fallback occupies the same space as the webfont.

The percentages are conventional estimates, not measurements taken from your two faces, so a pair with very different metrics will be worse than reported.
Nothing here loads a real font over a real network, so the blocking periods are described rather than timed.
The source path in the generated at-rule is derived from the family name rather than being a path you can verify.
Six blocks and a hundred blocks are treated linearly, whereas the shift score a browser reports aggregates differently.
The fallback pane always uses the same system stack, so a project whose fallback is a specific local face is not represented exactly.

Use it when a webfont is being introduced, when a page's text visibly moves as it loads, or when the case for preloading and metric overrides has to be made to someone who has not seen the reflow. The fallback and loaded panes side by side are the quickest version of that argument. Where the loading sequence rather than the display value is being planned, the font loading strategy builder covers preload and priority, the font face declaration builder writes the metric overrides the panel recommends, and the font CSS generator produces the whole set of rules for a family.

How to use Web Font Tester

Choose the webfont and the font display value, then read the strategy verdict line under the loaded preview.
Compare the two panes at the same size and sample, since the amount of movement is easiest to judge when the paragraphs sit one above the other.
Set the number of text blocks on screen and read the total shift risk, which is the per-block estimate multiplied by that count.
Copy the at-rule and add the preload, subsetting and metric override steps the panel lists.

When to use Web Font Tester vs related tools

Reach for it when a webfont is being added to a page, when text visibly jumps during load and the cause needs naming, or when a design review has approved a face without anyone checking what happens before it arrives. It is also the clearest way to show why block is a poor choice for body copy. For the full loading plan the font loading strategy builder covers preload and priority, the font face declaration builder writes the metric overrides that stop the reflow, and the font CSS generator produces the rules for a whole family at once.

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.