Typography does a lot of quiet work on a website. The right font makes a business look established, a blog feel readable and a brand feel distinct. It’s no surprise that designers love trying different typefaces.
But fonts also have a cost. Every font file has to be downloaded before text can be displayed in it. A site using three font families, each in several weights, with italic versions too, can easily download half a megabyte of fonts before the page looks right. Meanwhile, visitors see blank space where text should be, or text that jumps when the real font finally loads.
The good news is that you can have beautiful typography and fast pages. It just takes a few deliberate choices.
How browsers load fonts
When a browser renders a page, it reads your CSS, sees that some text uses a web font and starts downloading the font file. What happens while it waits depends on the font-display setting:
- The browser might hide the text until the font arrives, called a flash of invisible text.
- Or it might show the text in a fallback font, then swap to the web font when ready, called a flash of unstyled text.
Neither is perfect. Hidden text delays when visitors can read your content. Swapped text can shift the layout if the fallback and web font have different sizes. Good font loading minimises both problems.
Fonts also affect Core Web Vitals. If your largest element is a heading, font loading can delay Largest Contentful Paint. Font swaps can cause Cumulative Layout Shift.
Step 1: Use fewer fonts
The simplest optimisation is restraint. Most well-designed sites use:
- One font family for headings.
- One font family for body text.
- Or a single family for both.
Then limit the weights. Do you need light, regular, medium, semibold, bold and black? Most sites need two or three: regular for body text, a bold weight for headings and emphasis, perhaps a medium weight. Each weight and style is a separate file.
Italic styles are another separate download. If italics only appear occasionally, consider whether the browser’s synthesised italic is acceptable, though it doesn’t look as refined.
When I audit sites, I regularly find fonts loaded that nothing uses, often left behind by a theme setting or a page builder default.
Step 2: Consider system fonts
System font stacks use the fonts already installed on the visitor’s device, like San Francisco on Apple devices and Segoe UI on Windows. They load instantly, because nothing is downloaded.
System fonts look clean and modern, and they’re an excellent choice for body text on performance-focused sites. Many sites combine a distinctive web font for headings with a system stack for body text.
Step 3: Self-host your fonts
Loading fonts from a third-party service like Google Fonts is convenient, but self-hosting usually performs better and has privacy advantages.
Performance
Browsers used to share cached fonts between sites, so a popular font from a shared service might already be in the visitor’s cache. Modern browsers partition caches by site for privacy, so that benefit has largely gone. Loading from another domain also requires an extra connection, adding latency.
Self-hosted fonts load from your own domain, over the same connection as the rest of your site, and benefit from your caching and CDN settings.
Privacy
Loading fonts from a third-party server shares visitors’ IP addresses with that service. A German court ruled in 2022 that embedding Google Fonts this way without consent violated GDPR. Self-hosting avoids the issue entirely.
How to self-host
Download the font files, ideally in WOFF2 format, upload them to your theme or uploads folder and declare them with @font-face:
Check the font’s licence. Open source fonts, including those on Google Fonts, generally allow self-hosting. Commercial fonts have specific licence terms for web use.
Step 4: Use WOFF2
WOFF2 is the modern font format, with excellent compression and support in all current browsers. There’s no need to include older formats like TTF, EOT or WOFF for modern audiences. Serving WOFF2 alone keeps your CSS simple and your files small.
Step 5: Set font-display
The font-display property controls behaviour while fonts load. The most common values are:
- swap: show fallback text immediately, swap when the font loads. Text is always readable, but layout may shift.
- optional: use the web font only if it loads very quickly, otherwise stick with the fallback for that page view. Minimal shifting, but some visitors may not see your web font on the first visit.
- fallback: a short invisible period, then fallback, with a limited window for the swap.
swap is a good default for most sites. optional is excellent for performance-critical sites where a perfect brand font on first view is less important than stability.
Step 6: Preload the most important fonts
Browsers only discover fonts after downloading and parsing CSS. Preloading tells the browser about critical fonts earlier, so they download sooner:
The crossorigin attribute is required for fonts, even on your own domain. Without it, the browser downloads the font twice.
Only preload one or two fonts, usually the main body font and perhaps the primary heading weight. Preloading too many fonts competes with other important resources, like the hero image, and can make loading slower.
In WordPress, you can add preload links with the wp_head action in a custom plugin or child theme.
Step 7: Reduce layout shift from font swaps
When the fallback font and web font have different metrics, text reflows when the swap happens. Modern CSS lets you adjust the fallback font to match the web font more closely:
The exact values depend on the font. Online tools can calculate them for you. With well-matched fallbacks, the swap becomes almost invisible.
Step 8: Consider variable fonts
Variable fonts contain multiple weights, and sometimes widths and other styles, in a single file. If you need several weights of the same family, one variable font file can be smaller than several static files.
If you only need two weights, static files may still be smaller. Compare file sizes for your specific needs.
Step 9: Subset when appropriate
Font files often include characters for many languages. If your site only uses Latin characters, a subset containing just those characters can be much smaller. Many font services provide subsets, and tools exist to create your own. Be careful if your site includes multiple languages, names with accented characters or special symbols.
Fonts in WordPress block themes
Block themes define fonts in theme.json, and WordPress handles the @font-face declarations:
WordPress 6.5 also introduced the Font Library, which lets site owners install and manage fonts from the Site Editor, including downloading Google Fonts to host them locally. That makes self-hosting much easier for non-developers.
Check your theme and plugins
Many themes and page builders load Google Fonts by default, sometimes several families. Check your theme settings for options to disable external fonts or host them locally. Some plugins also load their own fonts and icon fonts. Query Monitor and the network tab reveal every font file loaded.
Icon fonts deserve a special mention. Loading an entire icon font library, hundreds of kilobytes, to display five icons is wasteful. Inline SVG icons are lighter, sharper and more accessible.
A quick font audit
To see exactly what fonts your site loads, open the network tab in your browser’s developer tools, filter by Font and reload the page. Note each file, its size and where it comes from. Then check which families and weights your design actually uses. On many sites, I find two or three font files that nothing on the page needs, usually left behind by a theme setting or plugin. Removing them is free speed.
Fonts are a small detail with a big effect, so audit them whenever the design changes.
Frequently asked questions
Are Google Fonts bad for performance?
Not terrible, but self-hosting is usually faster, avoids an extra connection and removes privacy concerns. With WordPress’s Font Library and good plugins, self-hosting Google Fonts is easy.
How many fonts should a website use?
Ideally one or two families, with two or three weights in total. More than that rarely improves the design and always costs performance.
Should I preload all my fonts?
No. Preload only the one or two most important fonts used above the fold. Preloading too many competes with other critical resources.
Why does my text jump when the page loads?
The fallback font is being replaced by the web font, and they have different sizes. Use font-display wisely, preload the main font and adjust fallback metrics to match.
Final thoughts
Typography and performance aren’t enemies. Use fewer families and weights, self-host fonts in WOFF2, set font-display sensibly, preload only what matters and match your fallback fonts to reduce shifting. Your site will look just as good, load faster and feel more stable, especially on mobile.
