Skip to main content
SlapMyWeb
Slap a site

Performance fix

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.

Difficulty
Medium
Impact
Medium
Time
15 min

Before

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

After

<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; }
Before and after code for: How to Preload Web Fonts and Fix Invisible Text

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 it

  1. Preload the critical font

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

  2. 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.

  3. Self-host where possible

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

The code

Beforehtml
@font-face { font-family: Inter; src: url(/inter.woff2); }  /* FOIT: text invisible until loaded */
Afterhtml
<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; }

On your platform

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.

Sources

Check your site with our free tool

Website Speed Test

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

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 signupLive scan progress