How to Speed Up Your Website by Optimizing Web Fonts

Web fonts make a site look intentional, but they can also be the heaviest thing it loads. These five steps keep the look and cut the weight.

1. Use WOFF2

It's the smallest broadly supported format — Brotli-compressed and roughly 30% lighter than WOFF. There's no reason to ship anything else to browsers.

2. Only load the weights you use

Each weight and style is a separate download. If your design uses regular and bold, load two files — not the entire family.

3. Set font-display: swap

This shows text immediately in a fallback and swaps your font in when it arrives, avoiding invisible text during load.

4. Preload the critical font

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

Preload only the one or two fonts needed for above-the-fold text — don't preload everything.

5. Subset to the characters you need

If your site is English-only, a font carrying thousands of glyphs for other scripts is wasted bytes. Subsetting to Latin can shrink a file dramatically.

Apply these and font loading stops being a performance problem — fonts become fast, cached, and invisible in the best way.