Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading

[Peter789]

Hello there,

How do I need to setup the webfont load for my website, and do I need to paste that code in the theme’s global CSS?

This is what I mean:

Ensure text remains visible during webfont load

[christian]

Hey Katarina,

If you’re in Theme Options, open up the Navigation (burger) in the upper left corner and go to Fonts. You can then choose the Font Display.

[Peter789]

Hi Chris,

I have already set that option to “Auto,” but I still see this message when I do Google Speed Insight on my website: https://prnt.sc/3QYgTdDAffBT

Here’s google speed insight: https://youtu.be/Js5INgM3HO8

Do I need to add the @font-face css to the theme global css so I don’t get that error?

Also, how do I set up passive listeners to improve scroll performance?

[christian]

Hey Katarina,

You need to report that analysis to Google why they don’t detect the font-display when it’s there.

Adding passive listeners or providing instructions on how to add passive listeners is beyond the scope of our theme support. Please check out our Boost service if you need us to optimize your site.

Thanks.