In this article · 11 sections
Custom fonts give a website personality, but each font file is a download, and badly loaded fonts can cause invisible text, layout jumps and slower pages. With a few simple practices, you can keep attractive typography without the speed cost.
How fonts slow pages
- Each font family and weight (regular, bold, extra-bold) is a separate file
- External font services add extra connections to other servers
- Browsers may hide text until the font loads ("flash of invisible text")
- When the custom font finally loads, text can reflow and shift the layout
1. Use fewer fonts and weights
Most business sites need: - One font for headings and one for body text (or the same for both) - Two or three weights in total (e.g. 400, 600, 800)
Every extra weight adds a file. Dropping from eight weights to three can save a significant amount of data.
2. Use WOFF2
WOFF2 is the most compressed web font format and is supported by all modern browsers. You don't need older formats for current browsers.
3. Self-host your fonts
Instead of loading fonts from an external service, download the WOFF2 files and serve them from your own domain: - No extra connection to another server - Better caching control - Fewer privacy concerns
@font-face {
font-family: 'Nunito';
src: url('/fonts/nunito-800.woff2') format('woff2');
font-weight: 800;
font-display: swap;
}
4. Use font-display: swap
font-display: swap tells the browser to show text immediately in a fallback font, then swap to the custom font when ready. Visitors can start reading right away.
5. Preload the most important font
If one font is used above the fold (e.g. your heading font), preload it:
<link rel="preload" href="/fonts/nunito-800.woff2" as="font" type="font/woff2" crossorigin>
Preload only one or two files; preloading everything defeats the purpose.
6. Subset fonts
Fonts often include characters for many languages. If your site uses only English, a Latin subset is much smaller. If you use Hindi or Punjabi, include Devanagari or Gurmukhi subsets only on pages that need them. See designing for Indian users.
7. Match fallback fonts
Choose a system fallback font similar in size to your custom font, so the swap causes minimal layout shift. Some tools generate adjusted fallback settings (size-adjust) to reduce shifting further.
8. Consider system fonts
The fastest font is one already on the device. System font stacks (like system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif) load instantly and look clean. Many high-performance sites use them for body text and a custom font only for headings.
Icon fonts
Loading a full icon font for a handful of icons is wasteful. Use inline SVG icons instead. See icons in web design.
Check your result
- PageSpeed Insights flags font problems ("Ensure text remains visible during webfont load")
- DevTools → Network → filter "Font" shows how many font files load and their sizes
Font optimisation is part of every speed audit we do. Get your site checked.