Assess web font loading strategy and its layout shift impact.
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.
Font Loading
Load time = transfer time + discovery delay; font-display governs what the user sees meanwhile
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.
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.
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.