How to Preload Web Fonts and Fix Invisible Text

Preload key fonts and use font-display: swap so text is never invisible while fonts load.

Medium Medium Impact 15 min

Why It Matters

Web fonts that load late cause either invisible text (FOIT) or a jarring swap (FOUT) that shifts layout. Preloading the critical font and setting font-display: swap shows readable text immediately and reduces layout shift.

How to Fix

Preload the critical font

Preload the one or two font files used above the fold (with crossorigin for woff2).

Use font-display: swap

Render a fallback font immediately, then swap in the webfont — pair it with a size-adjusted fallback to minimise the shift.

Self-host where possible

Self-hosting avoids a third-party connection to a font CDN on the critical path.

Code Fix

html

Before (broken)

@font-face { font-family: Inter; src: url(/inter.woff2); }  /* FOIT: text invisible until loaded */

After (fixed)

<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); font-display: swap; }

Platform-Specific Instructions

WordPress

Use a "host fonts locally" + preload option (OMGF plugin, or your caching plugin's font settings).

Next.js

next/font self-hosts, preloads and sets font-display automatically.

Check with our tool

Website Speed Test

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit