Archived topic
Leverage the font-display CSS feature For Google Fonts?
8 replies · Started by Rudy on April 24, 2019
Hello, I'm trying to optimize my page speed and was wondering if there is any way to use the font-display css feature for the google fonts set in generatepress customizer? (I use google fonts) for headings.
Hi there,
the font-display property needs to be added to the @font-face CSS so i don't think there is currently a way of injecting that into the Customizer selected fonts. I will get Tom to take a look.
Out of curiosity what is your intention with the font-display?
Since Google itself hosts the @font-face definitions, they would need to add font-display to their CSS.
You can host your own Google Fonts (https://docs.generatepress.com/article/adding-local-fonts/) and then add font-display if needed.
On this subject could you consider adding font-display: swap; to your generatepress font css. I've adding it manually but it will be overwritten on a theme update. Thanks!
Never a good idea to edit the theme's core file.
You can always use a child theme so they would be safe through updates:
https://docs.generatepress.com/?s=child+theme#using-a-child-theme
CSS editor is another option:
https://docs.generatepress.com/article/adding-css/
Yes I know. If you can tell me how to add the font-display:swap property after the font is already loaded I would like the info. I can't find a way to make it work in a child theme.
Hi there,
you would include the font-display property within your @font-face CSS rules for the locally hosted font.
Hi:
I added a code given by you guys and tom to my CSS snippets- no change on google pagespeed error.
People here say add to “ header” tag —?? Manually: Can this CSS code be added to snippets? Every article has a different code on this topic. Here is the warning:
Google Warning
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
URL
Potential Savings
…fonts/generatepress.woff2(cdn.thesoundadvocate.com)
30 ms
…fonts/fontello.woff(cdn.thesoundadvocate.com)
40 ms
What is the “ literal” code needed for Arial font and where and how is it put in. (Ive never manually added code to my website before).
Hi there,
you can remove the generatepress.woff2 font by changing Customizer > General > Icon Type to SVG.
The fontello font is coming from a plugin - it also is an icon font - there isn't much we can do about that. And as its an icon setting a fallback/swap option would be pointless aside of removing a google warning that wouldn't actually improve performance.
