font-display: swap and web fonts on your business website: how to avoid invisible text and speed up first read

You open your business site on a phone and for a second there are no headlines or buttons—only a grey block or invisible text until a web font finishes loading. That flash is called FOIT (Flash of Invisible Text), and in 2026 it still erodes trust on corporate websites, especially after you have already optimised images and Critical CSS.

The CSS property font-display: swap plus a clear web font strategy (self-hosted or third-party) shows readable system text immediately and swaps to your brand face when it is ready. This article explains how that fits FCP, LCP and brand typography, which values to use, and which mistakes to avoid.

What font-display is and why it matters

When the browser hits an @font-face rule, it downloads the file (WOFF2, WOFF, etc.) before painting text in that family—unless you specify otherwise. Without font-display, many browsers hide text until the font arrives or a timeout expires.

• swap: shows text immediately with a fallback, then swaps when the web font loads (a slight visual shift is possible).
• optional: uses the web font only if it arrives very quickly; on slow links the fallback stays (good for mobile).
• block: hides text briefly, then shows the font (FOIT risk).
• fallback: short invisible period, then fallback if the font is slow.

On business sites where messaging and CTAs must read instantly, swap or optional usually balance brand and performance best.

Performance and Core Web Vitals

Fonts are rarely the LCP element itself, but they delay first readable text and can hurt FCP when they block rendering. Pair them with preload for the critical weight, character subsets, and font-display: swap on every @font-face.

If the hero headline is the LCP, keep that weight file small and include a similar fallback in critical CSS to limit CLS on swap.

Google Fonts and third-party hosts

The display=swap query parameter on Google Fonts URLs enables swap in served @font-face rules. Still, each extra family adds requests and weight: limit weights (400, 600, 700) and subsets to what you actually use.

For more control, download WOFF2 files, self-host on your domain, and serve them with long cache headers—fewer third-party dependencies and alignment with lighter third-party usage.

Self-hosting fonts (practical steps)

1. List families and weights on home, services, and blog (DevTools → Computed).
2. Export WOFF2 (designer build or helper tools).
3. Declare @font-face with font-display: swap, unicode-range when subsetting, and explicit font-weight.
4. Preload only the above-the-fold weight: <link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>.
5. Set server or CDN cache for /fonts/*.

web.dev font best practices recommend fewer families, WOFF2, and avoiding unused weights.

Fallbacks that minimise shift

The flash from Arial to your custom face shrinks when the fallback has similar metrics. Modern CSS offers size-adjust, ascent-override, and descent-override on local fallbacks. Generator tools help tune values per family.

Align with your typographic hierarchy so critical CSS includes the same stacks for nav and body sizes.

What to expect (2026 benchmarks)

• No FOIT: visitors read the headline in the first useful frame.
• FCP: 0.2–0.8 s mobile gains are common when moving from implicit block to swap plus selective preload.
• Weight: dropping from six weights to two in WOFF2 often saves 200–400 KB on first visit.
• Privacy: self-hosting avoids font CDN calls on every page view.

Measure in Lighthouse and Core Web Vitals field data before and after release.

Common web font mistakes

• Loading entire Google families with eight weights nobody uses.
• Missing crossorigin on font preload.
• Choosing font-display: block for a «cleaner» look on slow networks.
• No fallback in critical CSS, so swap causes layout jump.
• Third-party font CDNs without preconnect.

Pre-deploy checklist

1. Network tab: filter «font», note total weight and order.
2. Add font-display: swap (or optional for body) on every @font-face.
3. Preload only the hero or main headline weight.
4. Tune fallback with size-adjust if shift is visible.
5. Check readability and contrast after swap on a real phone.

Conclusion

font-display: swap is the straightforward way for a business site to communicate from second one while your brand font finishes loading. It works with Critical CSS, subsets, and fewer weights. If you want a font audit, self-hosting, and a build pipeline marketing can trust, aatsoft can help you ship it without friction.