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.
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>
Me too. I鈥榤 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鈥榤 not mistaken.
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?
Let鈥榮 wait and see what Matt replies. I鈥榤 also unsure. 馃槉
Ah apologies - uploading custom fonts should be fine. But yeah I avoid using the google fonts integration as Zlatko mentioned.
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鈥檚 process could be just as good.
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... <!-- Preload fonts --> <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>
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">
this obviously has all the weights but not necessarily what you'd want. https://fonts.google.com/selection/embed
Ooh this could be the ticket
And this doesn't have GDPR issues?

