Fix Guide

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

Web fonts that are not preloaded are discovered late, because the browser only finds them after parsing the CSS that references them — so text either stays invisible or swaps in noticeably. Preload the one or two font files used above the fold, and set font-display: swap so text renders in a fallback face rather than not at all.

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

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit

Free foreverNo signupResults in 30s