Self-Hosting Fonts in Webflow: When It Helps Speed

Why it matters

In Webflow, you add fonts two ways. You pick a Google font in Site settings. Or you download the file and upload it as a custom font.

Webflow says the Google font option uses the Google Fonts API, which sends visitor IP addresses to Google servers. It warns this may not be GDPR-compliant. Its advice is to download the fonts and upload them as custom fonts.

On speed, web.dev says self-hosting should win on paper. It skips a third-party connection setup. But it cites a Web Almanac finding that sites with third-party fonts rendered faster. It says self-hosting is likely to win only with a CDN and HTTP/2.

Webflow's custom font article does not say how uploaded fonts are served. So do not assume a CDN. Measure instead.

How to check it

1. Find your font source. Open the published site. In the browser's Network tab, look for a webfont.js file. Webflow says if it loads, the Google Fonts API is still being called.
2. List your fonts. Open Site settings, then Fonts. Count families and weights.
3. Find the LCP element. Run PageSpeed Insights. If the largest element is text, the font may matter for LCP.
4. Time the font file. In the Network tab, filter by Font. Reload. Note the time to fetch each file, including connection setup.
5. Check file formats. For custom fonts, Webflow recommends WOFF2.
6. Check file size. Each custom font file can be up to 4MB in Webflow.
7. Check names. Webflow says a custom font named like a default Google font, such as Montserrat or Roboto, may keep loading from Google.
8. Check the license. Make sure it lets you host the font yourself.

How to fix it in Webflow

1. Decide why you are moving. Privacy is Webflow's stated reason. Speed is a test, not a promise. Write down the current load times first.
2. Download the font files. Get them from the source and check the license. If you can choose, pick WOFF2.
3. Subset if you can. web.dev warns that Google splits fonts into subsets. When you self-host, this optimization can be missed. It can lead to larger local files. Check the license first before subsetting.
4. Upload the custom font. Go to Site settings, then Fonts, then Custom fonts. Upload the file. Each file can be up to 4MB. Webflow says WOFF2 can be up to 50% smaller than TTF or OTF.
5. Rename if the name clashes. Give it a unique name, such as Montserrat-Local. Webflow says to rename each variant.
6. Set font display. Set it to swap in the font settings. Webflow says this prevents a flash of invisible text.
7. Switch your styles. In the Style panel, set each element and class to the new font.
8. Remove the Google version. Remove it from elements first. Then delete it in Site settings. Webflow says deleting it in settings alone does not remove it from the site. The API script keeps loading until all instances are gone. Elements still using it render in Times New Roman.
9. Publish and recheck. Look for webfont.js again in the Network tab.
10. Compare timings. Run PageSpeed Insights again. Compare font fetch times with your notes. web.dev suggests timing the self-hosted file against the third-party one.
11. Roll back if it is slower. If the Google font was faster for you, you can go back. Weigh that against the privacy point.

Checklist

• You know why you are self-hosting.
• Starting load times are noted.
• The license allows self-hosting.
• Files are WOFF2 where possible.
• Names do not clash with Google fonts.
• Font display is set to swap.
• No element still uses the Google version.
• webfont.js no longer loads.
• Font timings were compared after publishing.
• The number of fonts and weights is kept low.

FAQ

Is self-hosting fonts always faster?

No. web.dev says on paper it should be, because it removes a third-party connection. But it calls the real-world result less clear cut. Test your own site.

Do I need to preconnect to Google Fonts if I self-host?

web.dev's preconnect advice is aimed at third-party font origins. A self-hosted font is on your own domain, so those hints are not needed.

Can I keep using Google Fonts in Webflow?

Yes. The option does not need a paid plan. The main caution Webflow gives is the IP address and GDPR point. If that matters for your visitors, use custom fonts instead.

Dealing with this on a live Webflow site? It is the kind of work I do in Speed Send me your site and I will tell you what I would fix first