Web Font Optimization: font-display, Subsetting and Self-Hosting

Web fonts look great, but they are a hidden cause of slow, jumpy pages. A typical font weighs 30–100 KB and blocks text from showing until it downloads, and when it finally arrives it often shifts the whole layout because it differs from the fallback. The result is two poor metrics: LCP (text is late) and CLS (content jumps). The good news is that all of this is fixable with a few moves.

Use WOFF2 and nothing older

WOFF2 is the most compressed format and every modern browser supports it. Compared with old TTF or OTF, WOFF2 is 25–40% smaller for the same font. If your theme still serves multiple formats "for compatibility", you can safely keep WOFF2 only — browsers that lack support have essentially vanished from real traffic.

font-display: solve FOIT and FOUT

With no setting, the browser hides text while the font loads (FOIT — Flash of Invisible Text). That means blank space instead of content for up to 3 seconds. The font-display property in your @font-face rule changes that behaviour:

• swap — show the fallback font immediately, then swap it when the web font arrives. Text is always visible; the cost is a possible FOUT (a brief change in appearance).
• optional — if the font does not arrive almost instantly, the browser sticks with the fallback and causes no shift. Great for CLS, at the cost that some users never see your font.
• fallback — a compromise between the two.

For most sites swap is a safe choice, and optional is worth considering if CLS is your problem.

Subsetting: ship only the characters you use

A full font contains thousands of glyphs — Latin, Cyrillic, Greek, mathematical symbols. If your site uses only Latin plus a few accented letters, there is no reason for the visitor to download the whole set. Subsetting strips unused glyphs and easily halves the file size. Tools like glyphhanger or fonttools do it automatically, and Google Fonts offers a &subset=latin-ext parameter.

Self-hosting instead of the Google Fonts CDN

Loading fonts from fonts.googleapis.com means an extra connection to a third-party domain (DNS, TCP, TLS) before the font even starts downloading. Host the font on your own domain and you save that time and gain control over caching. With fast hosting and a CDN, a self-hosted WOFF2 arrives sooner than from Google''s server. Bonus: you avoid sending the visitor''s IP address to a third party, which also helps with GDPR compliance.

Preload the above-the-fold font

The font used by your main heading is worth preloading: <link rel="preload" as="font" type="font/woff2" href="/fonts/heading.woff2" crossorigin>. The browser then starts downloading it immediately instead of waiting to parse the CSS. Do not preload every font — just the one or two visible above the fold.

Match the fallback font

CLS happens when the fallback and web font have different widths and heights, so the text reflows. The size-adjust, ascent-override and descent-override properties in @font-face let the fallback system font take up almost the same space, so the swap is nearly invisible. The Fontaine tool generates this automatically.

Frequently asked questions

How many fonts are too many? Each font and each weight (regular, bold, italic) is a separate file. Stick to two font families and at most 3–4 weights. Anything beyond that slows you down with no visible benefit.

Do variable fonts help? Yes — one variable font can replace several weights in a single file, cutting the number of requests. It pays off if you genuinely use multiple weights.

On our WordPress hosting plans you serve fonts from an NVMe drive with a free CDN, so self-hosting runs at full speed. See our plans and pricing.