Managing Font Loading in Webflow: Google Fonts API vs Manual Uploads

Emily M. · 2025-11-12 18:34:40.705996+00

Qu: do you add fonts using the Google Fonts API in Webflow, or add them manually? I'm reviewing my sites' loading speeds and have seen great success by ditching the Google API, but when I add the fonts manually as WOFF2 I get the dreaded FOUT (flash of unstyled text). How are you guys managing this trade-off? If there's a best of both worlds I'd love to hear it.

Managing Font Loading in Webflow: Google Fonts API vs Manual Uploads | Relume Community

Matt J.
·
·
Emily M. I do it manually and avoid the webflow fonts settings. When you add the google fonts manually, make sure it has rel="preconnect" in the styles and that it script tag doesn't have async or defer and this should help. The async directive actually shouldn't hurt it either but its worth testing it with nothing. I guess the next thing to do after all that is to ensure its at the highest part of the site as possible - so if you are adding it to the custom code head section, make sure its at the top. Not entirely sure what else we could do. Maybe make sure that all other necessary scripts DO have defer where appropriate. Careful with this directive though, some scripts require loading BEFORE the DOM. And if thats the case, putting defer will load them after, and cause them not to break. <script defer src=""></script>
Zlatko
·
·
I also do it manually. That ensures that I don‘t have a single line of code from various Google scripts on my site, to avoid unnecessary cookies, or even transferring data to Google. I‘m that kind of guy. 😊
🙌1
Zlatko
·
·
Matt J. the rel="preconnect", is that a custom thing? Because I couldn‘t find it in the Site Settings in Webflow.
Emily M.
·
·
Matt J. so you're adding them in custom code in the head section? I had been uploading them in the Webflow font settings so i'll have to try that.
Zlatko
·
·
Me too. I‘m downloading the font from Google and uploading it via the Webflow font settings. But now I see that Matt might be implying a custom font embed, if I‘m not mistaken.
Emily M.
·
·
I don't know how to do that since Webflow doesn't support uploading WOFF2 files to the assets panel, so where does the URL come from?
Zlatko
·
·
Let‘s wait and see what Matt replies. I‘m also unsure. 😊
Matt J.
·
·
Ah apologies - uploading custom fonts should be fine. But yeah I avoid using the google fonts integration as Zlatko mentioned.
Matt J.
·
·
However, I was suggesting that you still use the google link and put it in the head so that you can control the attributes I mentioned though I feel like Zlatko’s process could be just as good.
Emily M.
·
·
I've uploaded WOFF2 files and connected them to text on the site, grabbed the links from Inspector, and added the following code at the top of <head>. Still getting FOUT...  <link rel="preload" rel="preconnect" href="https://cdn.prod.website-files.com/6659e61c71a44252dda53160/69170d0ff7b5af8f97c42851_Lato-Regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" rel="preconnect" href="https://cdn.prod.website-files.com/6659e61c71a44252dda53160/69170d0f29d683510a675184_Lato-Light.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" rel="preconnect" href="https://cdn.prod.website-files.com/6659e61c71a44252dda53160/6914d4c1e05ded6a8fdb8848_CormorantGaramond-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
Emily M.
·
·
Matt J. if you have a minute could you take a look at the above and let me know your thoughts ^
Matt J.
·
·
have you tried the google fonts embed? <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
Matt J.
·
·
this obviously has all the weights but not necessarily what you'd want. https://fonts.google.com/selection/embed
Emily M.
·
·
Ooh this could be the ticket
Emily M.
·
·
And this doesn't have GDPR issues?

16 comments