How to Optimize Fonts in Webflow to Speed Up Load Times

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to optimize font loading in Webflow to speed up your website’s rendering.

1. Use font-display: swap

This CSS property tells the browser to show the text with a system font first, then swap in your custom font once it’s loaded. Without it, the text stays invisible while the font loads (FOIT). Add this CSS in a global embed:

If you’re using Google Fonts through Webflow, add &display=swap to your font URL in the project settings.

2. Preload your main font

Add a preload for your main font’s WOFF2 file in the <head> of your page. This tells the browser to download the font first as soon as it receives the HTML.

3. Limit the number of variants

Each weight (100, 300, 400, 700, 900) and style (normal, italic) is a separate file. Audit the variants you actually use in your project and remove the others in Font Settings. A font with 3 variants instead of 6 = 50% less to download.

4. Upload your fonts in WOFF2

If you upload a custom font in Webflow, use the WOFF2 format: it’s 30% lighter than WOFF and supported by all modern browsers. Convert your fonts with CloudConvert if needed.

Conclusion

Font optimization is one of the easiest ways to improve your PageSpeed score. Use cases:

• Reduce FOIT (flash of invisible text) on long pages
• Improve LCP on pages with hero text in a custom font
• Optimize a page’s overall weight