[Resolved] Help with "font-display:" directive

[Dorian]

Hello,

I have been trying to speed up my website and did a few things.
Now I am down to the smaller details and I am getting a message from developers.google.com that I could leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Would I be able to do this on Generate Press?

Thanks,

Dorian

[Tom]

Hi there,

That depends – how are you currently loading fonts? Google fonts? Locally?

Let me know 🙂

[Dorian]

Hi Tom,

Thanks for the reply.
For now, I am loading locally, but if this works nicely, I would like to use Google fonts in the future.
The only font that needs loading is generatepress.woff2 at this point.

Cheers,

Dorian

[Tom]

If you’re hosting locally, font-display would go inside your @font-face block of CSS.

generatepress.woff2 is an icon font, so there isn’t a fallback we can load for it.

[Dorian]

Thank you Tom.
Then I’ll leave it as is for now.
I tried @font-face{font-display:swap} and that didn’t work.
I wanted to delay the font loading and shave off 100-150 ms.

Cheers,

Dorian

[Tom]

It would have to go into your existing @font-face block, which should have the URLs to your custom font, as well as the font-family name.

[Josh]

Hi Tom, thanks for the great support you give. I switched over to GP Premium a couple of months ago and have really been happy with it.

I actually came here to ask this same question, though: how to implement the font-display code that Google is really pushing. I added it to my @font-face and still got an alert on the web.dev tool.

I’m also loading some Google fonts. Does that change anything?

[Tom]

Hey Josh,

Any chance you can link me to your site?

Thanks! 🙂

[Author]

Posts