Web Font Optimization: Loading Fonts Without Hurting Performance

Web fonts affect two things users notice: when text first appears and whether it jumps when the final font arrives. A font loaded late can hold text invisible or force a swap that reflows the page, which shows up as a slower Largest Contentful Paint when the LCP element is text, and as layout shift. The levers are few and well documented: load fewer and smaller font files, start loading them earlier, choose a font-display strategy deliberately, and make the fallback font match the web font’s size.

How fonts get in the way

When the @font-face rules sit in an external stylesheet, browsers discover fonts late, only after that stylesheet, which blocks rendering, arrives. web.dev explains that fonts defined with @font-face rules “aren’t discovered until the browser downloads and parses those CSS files” (preloading critical assets). Its web font module describes two ways to help. A preload hint makes the font file discoverable early, and the browser “immediately begins downloading” it without waiting for the stylesheet. Inlining the @font-face declarations in a <style> element in the page’s <head> makes the font rules discoverable earlier, but discovery is not the same as download: web.dev cautions that the browser “only begins downloading font files after all render-blocking resources has been loaded”, so if the rest of the CSS stays in an external stylesheet, the font request still waits for it. Check the actual order in a browser network waterfall. Text that uses a web font cannot render in that font until the font file arrives. What happens in the meantime depends on font-display.

Swapping also has a layout cost. web.dev’s font guide states that “font swapping has the potential to cause layout shifts and impact Cumulative Layout Shift (CLS)”, because the web font and its fallback take up different amounts of space (web.dev font best practices).

font-display options

web.dev’s performance recommendation is font-display: optional, describing it as delaying text by no longer than about 100 milliseconds and avoiding font-swap layout shifts. Choose swap when the brand font must appear on first visit, and then invest in matching the fallback size.

Matching fallback metrics

When text swaps from a system font to a web font of different width and height, lines rewrap and content moves. CSS descriptors in an @font-face rule for the fallback can scale it to match:

@font-face {
  font-family: "Brand Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand", "Brand Fallback", sans-serif;
}

The percentages are placeholders. Calculate them for the actual pair of fonts (tools exist that compute these overrides), then compare the rendering of both fonts.

Load less

• Use WOFF2. It is the compressed format supported by current browsers.
• Subset. Include only the character ranges the site uses; use unicode-range to split by script so a Latin-only page does not download Cyrillic glyphs.
• Limit weights and styles. Each weight and italic is a separate file unless a variable font covers them. A variable font can replace several static files; check that it is actually smaller for your use.
• Self-host where practical. Serving fonts from your own domain or CDN avoids an extra connection to a font provider. Check the font’s license before self-hosting or subsetting it, since licenses differ on both.

Load earlier

Preload the one or two font files needed for above-the-fold text:

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

The crossorigin attribute is required for font preloads, even for same-origin files. Preload only fonts that are used on the initial view; preloading every weight competes with the LCP image and CSS for bandwidth.

Cache long

Font files change only when the design changes. Serve them with long Cache-Control lifetimes and version the file names when they do change.

Before and after example

Before (illustrative): a site loads a font family from a third-party CSS file with six weights including italics, no font-display, no preload. The headline is the LCP element on mobile. Field data shows LCP of 3.4 seconds and CLS of 0.15, mostly from text reflow.

After:

• self-hosted WOFF2 files for two weights (regular and bold), subset to Latin;
• font-display: optional for body text, swap for the headline font with a metric-matched fallback;
• preload for the regular weight only.

Expected result, to be confirmed by measurement: text renders earlier and swapping causes less reflow. How much less depends on how closely the computed fallback metrics match the web font; placeholder percentages like the ones above will not remove the shift.

Verification: check in the DevTools Network panel that fonts are requested early and in the Performance panel whether a layout shift remains at font load; recheck field LCP and CLS after the 28-day window.

Limitation: with optional, first-time visitors on slow connections see the fallback font; that is the trade-off for stability.

Font loading checklist

• [ ] Only the weights and styles in use are loaded.
• [ ] WOFF2 files, subset to the needed characters.
• [ ] font-display chosen deliberately per font.
• [ ] Fallback font metrics adjusted to match.
• [ ] Above-the-fold fonts preloaded with crossorigin.
• [ ] Long cache lifetimes on font files.
• [ ] Field LCP and CLS checked after changes.