[Support request] Adding font-display to css

Home Forums Support Adding font-display to css

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #837555
    Adrian

    Hi, I’m a very happy GP Premimium user and have just followed your excellent instructions on hosting my Google fonts locally.
    I want to add the font-display descriptor to each of my @font-face rules in the Custom CSS editor to eliminate the Google Page Speed warning. For some reason ‘font-display’ is not recognised in the editor.

    Any thoughts?

    GP Premium 1.7.8
    #838229
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    font-display is relatively new, so the editor doesn’t know about it yet. You can ignore any warnings the editor gives you and continue to use it.

    Let me know if you have any other questions πŸ™‚

    #844395
    Matthew

    Hi, I’m trying to do the same.

    However I’m using System Fonts through GeneratePress. Any advice about how to add the font-display property into my theme manually?

    #844637
    David
    Staff
    Customer Support

    Hi there,

    i don’t think you will need this when using System Stack fonts, as these are the very same fonts the font-display will swap or fallback to.

    #845202
    Matthew

    Then is there any way to disable the /fonts/generatepress.woff2 (and others) from being loaded? Or are they necessary?

    #845623
    David
    Staff
    Customer Support

    Those are the GP Icons ( menu toggle, shop cart etc ). There is no fallback state for them. We are looking at replacing these out for SVG’s hopefully in the the next Theme update.

    #845867
    Matthew

    Ahhhh. Ok. Thanks.

    #845980
    David
    Staff
    Customer Support
    #906253
    Riccardo

    I have a solution to add the option font-display:fallback; that work fine for me :

    Add these lines in this way at the end of the style.min.css or with an in-line style css script:

    
    @font-face { font-display:fallback; font-family:'Apple Color Emoji'; font-style:normal; font-weight:400; src: local('Apple Color Emoji'), local('Apple-Color-Emoji'), url(http(s)://your_domain_url/wp-content/themes/generatepress/fonts/generatepress.woff2) format('woff2');}
    @font-face { font-display:fallback; font-family:'Segoe UI Symbol'; font-style:normal; font-weight:400; src: local('Segoe UI Symbol'), local('Segoe-UI-Symbol'), url(http(s)://your_domain_url/wp-content/themes/generatepress/fonts/generatepress.woff2) format('woff2');}
    @font-face { font-display:fallback; font-family:'Segoe UI Emoji'; font-style:normal; font-weight:400; src: local('Segoe UI Emoji'), local('Segoe-UI-Emoji'), url(http(s)://your_domain_url/wp-content/themes/generatepress/fonts/generatepress.woff2) format('woff2');}
    @font-face { font-display:fallback; font-family:'Segoe UI'; font-style:normal; font-weight:400; src: local('Segoe UI'), local('Segoe-UI'), url(http(s)://your_domain_url/wp-content/themes/generatepress/fonts/generatepress.woff2) format('woff2');}

    and add this line into the head section :
    <link rel="preload" href="http(s)://your_domain_url/wp-content/themes/generatepress/fonts/generatepress.woff2" as="font" type="font/woff2" crossorigin="anonymous">

    lighthouse report

    #906804
    David
    Staff
    Customer Support

    Thanks for sharing – thats an impressive lighthouse report. I wonder how the icons will display if they fallback πŸ™‚

    In the next update to GeneratePress theme there will be an option to switch out the font for SVGs.

    #911788
    Riccardo

    Hi David, thank you for your reply. Glad to hear about the next update on svg icons, it’is very light solution, I have tested it on the twentyseventeen WordPress Theme.

    About Matthew’s topic by default generatepress doesn’t have icons Icon Font Awesame so I thought the Matthew’s test was related to font loading and to font-display

    #911934
    David
    Staff
    Customer Support

    Yes – SVG looks good – not sure if will load any faster but it will eliminate the lighthouse warning that there is no fallback for the generatepress.woff πŸ™‚

    #912766
    Riccardo

    Yes, I agree with you. Let’s say that these options give more control over browser behavior on resource loading. Obviously we are talking about milliseconds which, however, can become important on a 3G/4G mobile network.

    #912969
    David
    Staff
    Customer Support

    Well you know Tom – forever improving the performance πŸ™‚

    #913095
    Riccardo

    😊 Thank you for discussion, and congratulations to all those who have created generatepress.

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