[Support request] Leverage the font-display CSS feature For Google Fonts?

[Rudy]

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.

[David]

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?

[Tom]

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.

[Ryan]

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!

[Leo]

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/

[Ryan]

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.

[David]

Hi there,

you would include the font-display property within your @font-face CSS rules for the locally hosted font.

[Howard]

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).

[David]

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.

[Author]

Posts