I’ve just run my site through google lighthouse and my custom fonts are hitting my performance. I’m getting the above message with details saying ‘Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.’
I can’t seem to find a way in webflow to change this? Apart from setting a fall back. That isn’t working I’m guessing
Try to add this code at site level in the head section.
<style>
@font-face {
font-family: "NAME OF THE FONT"; font-display: swap;
}
</style>
Add one for each font concerned. It may work but I’m not sure. Webflow handles the @font-face declarations for you, so this is an attempt to inject the display swap parameter into Webflow’s font-face rules.
I tried this and it didn’t work. Thanks for suggesting though.
It’s so weird, I only have Circular font live on my site, but it seems like webflow is pulling a bunch of custom fonts through. I have used them in previous iterations of my site, but I removed them ages ago.
If you have any classes that referenced the custom fonts, the fonts will be loaded. You can inspect your published CSS to determine where they are used. Update the classes, then republish. That will clean up the orphans.
This worked a treat for me. My side was using a Google font as well as some custom font files I’d uploaded. PageSpeed Insights flagged the google font as an issue for ‘Ensure text remains visible during webfont load’ and this piece of code made a massive difference to the overall performance (according to PageSpeed Insights).
I am too having the problem. I did upload two custom fonts, and did set within the UI the font-display to swap. I did search this in the CSS file and this is correctly implemented within the @font-face, which actually should have solved the problem.
So what do you mean by saying “update the classes, then republish”?
So I did find the solution. I had to change my default font, which was monserrat in my case to my custom font. After that, the lighthouse warning went away