Guide Speed & Performance

How to stop web fonts slowing your page

How a web font ends up delaying the page or shifting its layout, and the specific settings that fix each cause.

iFastHosting Support Team Updated 26 August 2026 7 min read Intermediate

A custom web font is a file the browser has to download before it can display text in that font, and until it arrives the browser has a choice to make: show nothing where that text belongs, or show it in a fallback font and swap it out once the real one loads. Either choice has a cost, and web fonts handled without attention to this are a common, easily fixed cause of both a slow-feeling page and content that jumps around while it loads.

The two problems fonts actually cause

Delayed rendering. If the browser is set to hide text until the custom font has loaded, and that font is slow to arrive, a visitor can be looking at a blank space where readable text should already be — directly hurting Largest Contentful Paint if the delayed text happens to be the largest visible element.
Layout shift. If the browser instead shows a fallback font immediately, different fonts have different letter widths, so text can reflow — sometimes significantly — the moment the real font swaps in. This is a direct contributor to Cumulative Layout Shift.

Neither problem is really about file size on its own, though smaller font files help too — both are mostly about controlling what the browser does while it waits.

Set font-display deliberately

The font-display CSS property controls exactly this behaviour, and leaving it unset means accepting whatever a browser's default happens to be rather than choosing on purpose.

@font-face {
  font-family: "Example";
  src: url("example.woff2") format("woff2");
  font-display: swap;
}

Value	Behaviour
`swap`	Shows a fallback font immediately, swaps to the custom font once it loads. Text is always visible, at the cost of a possible layout shift on swap.
`optional`	Uses the custom font only if it is already available very quickly, otherwise sticks with the fallback for that visit. Avoids shift entirely, at the cost of some visitors not seeing the custom font at all.
`block`	Hides text briefly before falling back. Generally worth avoiding — this is the setting most likely to delay visible content.

For most sites, swap is the right default because it guarantees text is never invisible. Where layout shift specifically is the bigger concern — a design where reflow is highly visible — optional is worth considering as a deliberate trade-off.

Preload the fonts that matter

A font referenced only inside a stylesheet is not discovered by the browser until that stylesheet has been fetched and parsed, which delays the font request later than it needs to start. Preloading tells the browser about a critical font immediately:

<link rel="preload" href="example.woff2" as="font"
      type="font/woff2" crossorigin>

Reserve this for the one or two fonts used in the earliest visible content — typically body text and a main heading — rather than every font weight on the site. Preloading everything defeats the purpose, since it competes for the same early bandwidth that made preloading useful in the first place.

Cut down to the weights you actually use

It is common for a site to load four, five or six font weights — light, regular, medium, bold, and their italic equivalents — while the actual design only ever uses two of them. Each unused weight is a complete file the browser downloads for nothing.

Audit weights against the actual design

Check the site's CSS for every font-weight value actually applied anywhere, then compare that against how many weights are being loaded. It is common to find two or three weights loaded that nothing on the site ever uses.

Prefer WOFF2

WOFF2 is the modern web font format, and it compresses more effectively than older formats such as TTF or OTF served directly. All current browsers support it, which means there is little reason to serve an older, larger format as the primary source rather than as a fallback for the rare case that needs one.

Consider whether you need a custom font at all for every use

System fonts — the fonts already installed on a visitor's device — require no download at all, because they are already there. This is not a suggestion to abandon brand typography, but it is worth asking, for text that is not part of the core visual identity — a code block, a table, a secondary caption — whether a system font serves the purpose just as well without adding another file to the page.

A working checklist

Set font-display to swap on every custom font
Guarantees text is visible even before the font has finished loading.
Preload the one or two fonts used above the fold
Everything else can load in the normal order without preloading.
Remove weights the design does not actually use
Check applied CSS against loaded weights, not the other way round.
Serve WOFF2 as the primary format
Keep an older format only as a fallback if you specifically need to support very old browsers.

Fonts are one of the few page-weight issues that also directly affects layout stability, which makes fixing them worth doing before chasing smaller gains elsewhere in reducing the number of requests a page makes.