How can I make sure to use this CSS function? Google Pagespeed Insights recommends adding this. Is there a way to add this via custom code?
Just chiming in that I have this question too!
Why not? Just add your properties with any custom code method (for the whole site, for the page, with embed)
For those inquiring minds…
2 Likes
I noticed webflow calls google fonts using javascript instead of the regular html. It puts it on top of all pages instead of putting it in the css. I guess it helps calling typekit fonts also.
Webflow google font code using js:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script> <script type="text/javascript"> WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" ] } }); </script>
Standard google font import code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
In this code you can see the font-display: swap being used (&display=swap) . How can we call the font-display using javascript?
Thanks
1 Like
I would also love to know the answer to @Ntchi 's question. Font-display=swap would help my site greatly it seems. Is there a way to directly access the CSS to make sure the swap is in there?
2 Likes
I would also like to know how I can use font-display: swap; with Webflow Font embed.
I’m also curious about this.
2 Likes
Also trying to find a solution to this.
1 Like
For those that did not visit the link and are asking how to do this with fonts loaded via the webfont,js library that Webflow uses the answer is : TL’DR => you can’t.
The article presents options for you if you want to load the fonts yourself or leverage Cloudflare service workers. Those would be the only two options for Webflow sites hosted on Webflow.
2 Likes
Awesome thanks. New to webflow forum and didn’t see that your previous comment with the link was the solution. Will check it out.
I’ve been looking for a solution to this for a while now and this thread keeps popping up in my searches.
I found a way to make this happen for those looking for a no-code work arround. Just follow the steps below.
Download the open source font on Google Fonts
Extract the asset into your local x:/project/fonts/font-name folder
Upload the .TTF asset to font-squirl optimizer
Extract the .woff2 asset
Copy it to your local x:/project/fonts/font-name folder
Upload the assets to Webflow Settings → Font
Define your Font Family, display: swap, and fallback accordingly.
Run your speed test again and measure the improvements.
No more nagging fallback font reccomendation
FROM
TO
Now crack open a beer, a soda, some coffee, or tea, take a sip and sigh in relief.
And that folks is the work around to getting Google Fonts to display swap.
7 Likes
Great job on this!! This worked for us, even with Montserrat. This brought us from a score of 70 (Webflow was loading 28 google versions of Montserrat) to score 95 (loading 3 Montserrat). Shame Webflow makes this such a hack job.
Just upload the compressed files manually as you said, then make sure you’re super precise with your fonts in the classes - if there’s a single mention of ie. Lato or something you don’t haven’t uploaded, Webfont will be back again. Ctrl + F your downloaded CSS as you said to remove all those mentions. The most extreme version of this to test agains is removing all mentions of any custom fonts on your classes, and setting the body to default (Arial).
In this case Webfont should not be called at all and our project performance was a 96 score (but it wasn’t pretty).
We ended up loading montserrat back in to custom fonts once compressed and are now at 95 score.
If it works correctly, the ones you haven’t uploaded will be greyed out as below.
Webfont is now not loaded at all now on ATMOS Financial | Climate fintech offering checking, savings & solar loans for people and planet.
leading to:
it didnt work for me i wonder why