How to correctly implement @font-face{font-display:swap} ?
It was advised to me (by a website speed expert) to add “font-display:swap” where it says @font-face
So that text can be displayed until the font loads.
After implementing this in the font-newspaper.css file see: https://tinyurl.com/y3j2gjge, it is however not working (after saving and clearing cache it won’t show in the front-end inspection code, also adding it in the custom CSS area of the theme did not do the trick).
Google Lighthouse test still says: “Ensure text remains visible during webfont load”
pointing to the file/loading at …icons/newspaper.woff?16
Please advise how to implement “font-dispaly: swap” correctly.
Thank you
Hi,
You can set the code in theme panel> Analytics/JS Codes like this -> https://www.screencast.com/t/CNIg11v5
<style>
@font-face{font-display:swap}
</style>
Hope this will help you; let me know the results!
Thank you!
Hi Calin,
I did that, but it is still showing:
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more. See: https://developers.google.com/web/updates/2016/02/font-display?utm_source=lighthouse&utm_medium=devtools
Potential time saving could be up to 3 sec.
Any other suggestions?
The problematic font file is this one: icons/newspaper.woff?16
Hi,
You could try loading your own fonts in the theme panel and disable Google fonts in the theme, from what I can find online that might work. Or maybe load them in the theme header directly (with CSS font-face or import) and then apply them as well with CSS.
Here are some resources I found online, maybe they are helpful
– https://coffeencoding.com/load-google-fonts-5x-faster-in-wordpress/
– https://stackoverflow.com/questions/54277912/ensure-text-remains-visible-during-webfont-load-not-getting-resolved-in-google-p
– https://css-tricks.com/snippets/css/using-font-face/
– https://developers.google.com/web/updates/2016/02/font-display
Thanks
