Check webfonts, font-display and preloads

Writings as part of the charging budget

Multiple families, lots of fonts, and additional sources can increase a website’s charging budget. However, how many files a browser actually loads also depends on text, character set, CSS, and device. The checker therefore represents the found definitions and sources, without counting all declared files as actual downloads.

Select font display consciously

font-display controls how the browser handles text during loading. auto and block deserve special attention because text can remain invisible at times. swap shows a substitute font early on, but can create a visible change. Optional and fallback have other considerations. No single value is optimal for every font and page design; control the effect with real content and a slow connection.

Reconcile preloads and file sources

A font preload should fit an early required font file. If the appropriate crossorigin setting is missing, the font can be requested again despite the preload. A preload without a suitable source in the examined CSS is marked as an indication, not automatically proven unused. Also check whether variants are really needed and whether a variable font can sensibly replace several files.

What the Size Says

For a maximum of eight font files found, a HEAD request is made. A reported content length is a server specification and may be missing. The checker does not load the files for visual comparison and does not measure actual use, LCP or layout shifts. It reads a maximum of six external stylesheets; dynamic reloads remain outside the scope. Then test changes in the browser and with your most important page types.

Frequent questions