Web Font Optimization: 6 Steps to Speed Up Your Site
The world of web fonts is like a beauty salon—everyone wants the best, but not everyone is willing to wait for the stylist to finish their work. And your visitors? They are particularly impatient.
When fonts load slowly, users don’t see your carefully crafted text but only a blank page or an annoying content jump. This convinces them that your site was crafted by a hairdressing intern on a lazy Friday afternoon.
Let's turn your web fonts into an advantage instead of a speed bump.
Why Bother with Font Optimization?
Fonts are more than just aesthetics. They're digital data that users need to download before they can see your text. And since text is usually one of the first things visitors want to see, fonts directly impact two key metrics:
-
Largest Contentful Paint (LCP) – the time it takes to render the largest visible content on the page. Often, it's the text waiting for the font to load.
-
Cumulative Layout Shift (CLS) – the degree to which content "jumps" during loading. When a font loads later than the rest of the page, text can suddenly change size, disrupting the entire layout.
CLS isn’t a strange acronym but an electric shock for users when text jumps just as they are ready to read. (From our font optimization for Sazka.cz)
6 Steps to Fonts That Won't Slow Down Your Site
1. WOFF2: The Only Format You Need Today
If your fonts are still traveling the internet in outdated formats like TTF or EOT, it's time for an upgrade.
WOFF2 offers up to 30% better compression than older formats and is supported by all modern browsers.
@font-face {
font-family: 'MyFont';
src:
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* For browsers from the Jurassic period */
}
If you're concerned about very old browsers, also use the WOFF format, as shown in the code example, but it's not necessary.
2. Subsetting: Don't Burden Users with Characters They'll Never See
Most fonts contain hundreds to thousands of characters for various languages. If your site primarily uses Czech text, why make visitors download support for Chinese or Arabic?
With the tool Glyphhanger, you can create a "lightweight" version of the font containing only the characters you actually use. The result? The font can be up to 10× smaller.
A practical story: by using subsetting and reducing the number of font weights, we reduced the font data volume at Trenýrkárna.cz by hundreds of percent. You'll notice this from the first visit.
For multilingual sites, you can prepare language-specific subsets and load them conditionally based on the current language of the page. This is what we do at PageSpeed.ONE as part of our speed analyses.
3. Preload Critical Fonts: Priority for What Users Will See First
Some fonts are more important than others. Fonts for H1 headlines or text in the first visible part of the screen (above the "fold") deserve faster loading.
Using the preload instruction, you can tell the browser: “I need this as soon as possible”:
<head>
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin />
</head>
Note: Use preload only for truly critical fonts. Each preload takes up part of your website's "speed budget."
4. Stop the Jumping Text: Master Font-Display
The font-display property determines how the browser behaves while waiting for the font to load. You have several value options:
-
swap– text initially appears with a fallback system font and switches to the web font after loading. Fast but can cause jumping (CLS). -
fallback– a brief period of "invisibility," then a system font, and if the web font loads in a reasonable time, it gets used. -
optional– the browser decides whether to download and use the font. Suitable for less important fonts.
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: fallback; /* Customize with your choice */
}
It's also important to select a suitable fallback font with similar dimensions to your web font. This minimizes content jumping when switching.
5. Variable Fonts: One File to Rule Them All
Using one font on your site in three different weights? The traditional approach means downloading three different files.
Variable fonts allow multiple weights in a single file, significantly reducing the overall data size.
@font-face {
font-family: 'VariableFont';
src: url('var-font.woff2') format('woff2-variations');
font-weight: 100 900; /* Range of supported weights */
}
.bold-text {
font-weight: 700;
}
.medium-text {
font-weight: 400;
}
6. What You Don't Measure, You Can't Improve
How do you know if your fonts are slowing down your site? Use Lighthouse in Chrome DevTools or our PageSpeed PLUS monitoring, which shows you the evolution of font data volume or the impact of fonts on LCP and CLS.
Website speed isn't a one-time affair. With every new feature, image, or font, it can deteriorate. Our PageSpeed PLUS monitoring continuously tracks your site's performance and alerts you when metrics begin to decline.
In Chrome DevTools, you can monitor font loading in the "Network" tab and filter by type "Font."
Don't Underestimate Font Optimization on the Web
Font optimization isn't just a technical detail—it's an investment in user experience, SEO, and conversions.
With properly optimized fonts, your site will not only look great but also load quickly and provide a smooth experience for all visitors, regardless of device or connection type.