Archived topic
Help with "font-display:" directive
7 replies · Started by Dorian on November 30, 2018
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
Hi there,
That depends - how are you currently loading fonts? Google fonts? Locally?
Let me know :)
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
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.
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
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.
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?
Hey Josh,
Any chance you can link me to your site?
Thanks! :)
