Streaming live at 10am (PST)

'Ensure text remains visible during webfont load'

Hi there,

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 :man_shrugging:t3:

bumping this as this seems like quite the oversight if there’s not a fix?

Try to add this code at site level in the head section.

@font-face {
  font-family: "NAME OF THE FONT";  font-display: swap;

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.

Thanks! Is there any easier way other than going through each class one by one?? :sweat_smile:

Download the CSS file, open in any editor, then search for the font name. Boom.

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).