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

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

Home Forums Support Leverage the font-display CSS feature For Google Fonts?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #878373
    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.

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #879005
    David
    Staff
    Customer Support

    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?

    #879253
    Tom
    Lead Developer
    Lead Developer

    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.

    #897965
    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!

    #897968
    Leo
    Staff
    Customer 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:
    https://docs.generatepress.com/?s=child+theme#using-a-child-theme

    CSS editor is another option:
    https://docs.generatepress.com/article/adding-css/

    #897969
    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.

    #898210
    David
    Staff
    Customer Support

    Hi there,

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

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

    #1433884
    David
    Staff
    Customer Support

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.