- This topic has 8 replies, 2 voices, and was last updated 9 months, 1 week ago by David.
April 24, 2019 at 6:25 pm #878373Rudy
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.GeneratePress 2.2.2GP Premium 1.8.1April 25, 2019 at 5:51 am #879005DavidStaffCustomer Support
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?April 25, 2019 at 7:41 am #879253TomLead DeveloperLead Developer
Since Google itself hosts the
@font-facedefinitions, they would need to add
font-displayto their CSS.
You can host your own Google Fonts (https://docs.generatepress.com/article/adding-local-fonts/) and then add
font-displayif needed.May 13, 2019 at 7:28 am #897965Ryan
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!May 13, 2019 at 7:30 am #897968LeoStaffCustomer Support
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:
CSS editor is another option:
https://docs.generatepress.com/article/adding-css/May 13, 2019 at 7:32 am #897969Ryan
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.May 13, 2019 at 12:01 pm #898210DavidStaffCustomer SupportSeptember 7, 2020 at 6:01 am #1433840Howard
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:
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
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).September 7, 2020 at 6:54 am #1433884DavidStaffCustomer Support
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.
- You must be logged in to reply to this topic.