SEO / GEO

3 views

5 min

How to Optimize Fonts in Webflow to Speed Up Load Times

Learn how to optimize font loading in Webflow: font-display swap, preload WOFF2, and reduce font variants.

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.

Strategy	LCP impact	Setup
font-display: swap	High	CSS embed or Webflow variable
Preload the main font	High	Custom code head
Character subset	Medium	Custom font upload
Limit the number of variants	Medium	Remove unused weights

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:

@font-face {
  font-display: swap;
}

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.

<link rel="preload"
     href="/fonts/votre-font-regular.woff2"
     as="font"
     type="font/woff2"
     crossorigin>

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.

good to know

Avoid loading more than 2 different font families on the same website. Every extra family adds network requests and weight. If you need a distinctive typeface for headings and a readable font for body text, that’s the reasonable maximum. For icons, prefer inline SVGs over icon fonts like Font Awesome.

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

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss