Font Loading Calculator

Assess web font loading strategy and its layout shift impact.

About Font Loading Calculator

font-display trades invisible text against layout shift: block hides text while loading, swap shows a fallback and reflows, and optional avoids both by declining to swap at all. Preloading removes the discovery delay, which is often the largest component. Font-driven reflow is a major CLS contributor, and matching fallback metrics with size-adjust removes most of it without giving up the web font.

Formula

Font Loading

Load time = transfer time + discovery delay; font-display governs what the user sees meanwhile

swap: Shows fallback text immediately, then swaps, which causes reflow
optional: Uses the font only if already cached, eliminating shift entirely

Worked example

With the default values below, Font Loading Calculator returns Font Load Time of 172. Change any input above and every figure here is recalculated in your browser.

Inputs used

Font filesminimum 0: 4
Average font file sizeminimum 0 KB: 28 KB
font-display valueone of swap, optional, fallback, block: swap
Fonts preloadedone of Yes, No: Yes
Connection speedminimum 0.01 Mbps: 8 Mbps

Results

Font Load Time: 172 ms
Total Font Weight: 112.0 KB
Invisible Text Duration: 0 ms
Layout Shift Risk: Moderate — text reflows when the font arrives
Recommendation: Font strategy is reasonable — consider size-adjust to reduce reflow

Step by step

1Values used
2Font Loading
3Font Load Time= 172 ms
4Total Font Weight= 112.0 KB
5Invisible Text Duration= 0 ms
6Layout Shift Risk= Moderate — text reflows when the font arrives
7Recommendation= Font strategy is reasonable — consider size-adjust to reduce reflow

Assumptions and limits

The result is derived only from the 5 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax or compounding frequency into account.
Figures are rounded for display to 1 decimal place, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is Font Loading calculated?

Load time = transfer time + discovery delay; font-display governs what the user sees meanwhile font-display trades invisible text against layout shift: block hides text while loading, swap shows a fallback and reflows, and optional avoids both by declining to swap at all. Preloading removes the discovery delay, which is often the largest component.

Why does Font Loading matter?

Font-driven reflow is a major CLS contributor, and matching fallback metrics with size-adjust removes most of it without giving up the web font.

What values do I need to enter?

This calculator takes 5 inputs: Font files, Average font file size, font-display value, Fonts preloaded, Connection speed. The pre-filled defaults are a realistic starting point — replace them with figures from your own environment for a result you can act on.