Web Fonts and Performance: How to Load Fonts Without Slowing Your Site

Web fonts give a site its identity, but loaded badly they delay text, make the layout jump and hurt LCP and CLS. With font-display, small WOFF2 files, targeted preload and variable fonts you get refined typography without sacrificing speed.

Why Fonts Weigh on Performance

Every family and every weight is a file to download. Until the font arrives, the browser may hide the text (FOIT) or show it in a fallback font and swap it later (FOUT), causing a layout shift. Either way users perceive slowness, and Google measures the effect with Largest Contentful Paint and Cumulative Layout Shift.

font-display: Choosing the Right Behaviour

• swap: shows the fallback font immediately and swaps when the web font is ready; the most common choice for body text.
• optional: uses the font only if it is already cached or arrives very quickly; almost eliminates layout shift.
• fallback: a short wait, then the fallback font; a compromise between the two.
• block: avoid for reading text, because it hides it for a long time.

For body text, swap or optional is almost always preferable. For headings in a brand font you can use swap together with a fallback that has similar metrics.

Format, Subsetting and Number of Files

WOFF2 is the format to use: it is widely supported and highly compressed. Subsetting removes glyphs you do not need, such as unused alphabets, and can cut weight by more than half. Limit yourself to one or two families and only the weights actually used, and host the files on your own domain to avoid third-party connections and simplify privacy management.

Preload and Variable Fonts

Preloading only the font used in the visible part of the page brings the download forward, but keep it to one or two files, otherwise it steals bandwidth from more important resources. Variable fonts pack several weights and widths into a single file: they replace many static variants and allow typographic nuance without extra requests.

Reducing Layout Shift with Fallbacks

Choose a system font with proportions close to the web font and tune the fallback metrics, for example with size-adjust and the ascent-override and descent-override properties. When the final font arrives, the text changes appearance but does not move.

How to Check the Result

Check the waterfall in the browser network panel, Lighthouse scores and real Core Web Vitals data in Search Console. A test on a slow connection immediately shows whether text stays invisible or the layout jumps.

Key takeaway: a few subsetted WOFF2 files, a suitable font-display, selective preload and a fallback with matched metrics deliver quality typography and healthy Core Web Vitals, with direct benefits for SEO and conversions.