How to Make Webfonts Load Faster
Fonts are often among the first files a page needs. These seven fixes are listed roughly in order of impact, and most take only a few minutes.
1. Use WOFF2
It’s the smallest common format. If you’re still serving TTF or OTF, this is your easiest win. Use the Webfont Generator to convert them.
2. Remove characters you don’t use
Many fonts carry alphabets your site never shows. The Font Subsetter keeps only the languages you choose. Check your license first, and keep every language your site uses.
3. Load fewer weights
Each weight and italic is another file. Many sites need only regular and bold. Search your CSS for weights you no longer use and remove them.
4. Consider a variable font
If you use three or more weights, one variable font can be smaller than several static files. You can reduce it further by narrowing its weight range in the Webfont Generator.
5. Preload your main font
Normally the browser finds a font only after it has read your CSS. Preloading lets it start sooner:
<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>Keep the crossorigin attribute, even on your own domain, or the file may download twice. Preload only the one or two fonts used at the top of the page.
6. Set font-display
This controls what visitors see while a font loads. swap shows a fallback right away, so your text is never invisible. optional avoids a late swap, but slow connections may not see your font on the first visit.
7. Cache fonts for a long time
Font files rarely change, so let browsers keep them. Add a version or hash to the file name, then send:
Cache-Control: public, max-age=31536000, immutableMeasure the result
Run your page through the Page Speed Test before and after, and compare Largest Contentful Paint and layout shift.
