Web Font Loading Checker

Find the fonts a page loads, whether text is hidden while they arrive, and how many weights are being fetched.

Any page. Fonts are usually declared site-wide.

20 runs left today · sign up for more

About this tool

Finds the web fonts a page declares, checks how they are loaded, and reports what a reader sees while waiting.

**The default is the bad option.** Without `font-display`, a browser hides the text for up to three seconds waiting for the font to arrive. The page has rendered, the layout is complete, and there is nothing to read — the flash of invisible text. `font-display: swap` shows a fallback immediately and swaps when the font arrives, trading invisible text for a visible reflow. For body copy that is unambiguously the better trade.

The other finding is volume. Each weight and style is a separate file, so a page loading four weights in roman and italic is fetching eight files before the text settles. Most sites use two or three of them.

Font files declared in external stylesheets cannot be seen from the HTML, and the tool says so rather than reporting a page with no `@font-face` as having no web fonts.

Common questions

Which font-display value should I use?

swap for body text — a fallback appears immediately and is replaced when the font arrives. optional for decorative fonts, which skips the swap entirely on a slow connection. Never leave it unset, which is the same as block.

How do I avoid the layout shift that swap causes?

Pick a fallback with similar metrics and tune it with size-adjust and ascent-override. Getting the fallback close to the web font makes the swap nearly invisible, which is the only way to have both.

Should I preload fonts?

One or two — the weights used above the fold. Preload must include crossorigin, because fonts are always fetched in anonymous CORS mode and without it the file downloads twice.

Is self-hosting better than a font CDN?

Usually, now. Browsers stopped sharing font caches across sites years ago, so the old argument for a CDN is gone, and self-hosting removes a DNS lookup, a connection, and a third party receiving your visitors' IP addresses.