Load fewer font files and use the right formats to keep your text fast and sharp.
Every font family and weight you load is a separate file your visitors' browsers download before they can show your text. Trimming that list is one of the fastest ways to lighten your pages without changing your design much.
Audit the fonts you load
Start by counting your font families, then the weights in each one. A common culprit is loading six weights when two cover everything in the design, usually regular (400) and bold (700).
To review your fonts, go to Site settings > Fonts. Look for families you no longer use, weights you never apply, and styles (like italics) you don't need.
Good to know
The Webflow health scan flags sites that use more than ten webfonts. The site usage dashboard also flags font files over 80 KB that load more than 1,000 times. Learn how to run a health scan.
Remove fonts you don't use
Before you delete a font in your site settings, remove every place it's used in your design. Otherwise, text that references the deleted font renders in Times New Roman, and a Google font keeps loading until all instances are gone.
To remove an unused font:
- Find every element that uses the font and change its font
- Go to Site settings > Fonts
- Delete the font from its section (Google fonts, Custom fonts, or Adobe fonts)
- Publish your site
Learn more about adding and removing Google fonts.
Use a variable font
A variable font packs every weight and style of a family into one file. If your design uses several weights of the same family, a single variable font can replace multiple font files. Learn more about variable fonts.
Upload fonts in WOFF2 format
If you upload your own fonts, use the WOFF2 format. It's up to 50% smaller than TTF or OTF files, loads faster, and works in all modern browsers. You can convert other formats with a tool like Font Squirrel's Webfont Generator. Learn more about uploading custom fonts.
Use system fonts where you can
Body text, forms, and interface copy often don't need a brand font. System fonts load instantly because they're already on your visitor's device. Save your brand font for headings and moments that need it.
Fewer families, fewer requests
If two families cover your brand, don't load a third. Each extra family adds another request, and a visitor's browser can't show your text in that font until the file arrives.
For a deeper look, read Chrome's guide to optimizing web font loading.
Note
Text shows in a fallback font first, then swaps to your brand font once it loads. That swap can shift your layout. Prevent layout shifts covers how to reduce it.
Keep tuning your site