Assigning Font-Display to GP Premium Fonts

[Jim]

In this topic, Tom said:

The only fonts GeneratePress has that require font-display are Google Fonts…

I was able to eliminate the Generatepress @font-face CSS from our Child stylesheet after turning the SVG icons on. I’ve also added the new generate_google_font_display filter, which seems to address Google fonts. So, thanks for that!

Google Pagespeed, however, would still like to see font-display declared for GP Premium fonts. Insights still throws the warning: “Ensure text remains visible during webfont load”

I’ve addressed this for fonts being loaded by other plugins, but can’t seem to get it right for GP Premium. I have added the following to our Child CSS:

/* Plugin: GP Premium */
@font-face {
    font-family:'GP Premium';
    font-display:swap;
    src:url(https://tripawds.net/wp-content/plugins/gp-premium/general/icons/gp-premium.eot);
    src:url(https://tripawds.net/wp-content/plugins/gp-premium/general/icons/gp-premium.eot#iefix) format('embedded-opentype'),
    url(https://tripawds.net/wp-content/plugins/gp-premium/general/icons/gp-premium.ttf) format('truetype'),
    url(https://tripawds.net/wp-content/plugins/gp-premium/general/icons/gp-premium.woff) format('woff'),
    url(https://tripawds.net/wp-content/plugins/gp-premium/general/icons/gp-premium.svg#gp-premium) format('svg');
    font-weight:400;
    font-style:normal;
}

It seems whatever was done for the GeneratePress font-family, also needs to be done for GP Premium. Or, I could use some help addressing the issue via Child CSS, or another function/filter…Thanks!

[Tom]

The SVG option will be integrated into GP Premium 1.9. It was just released in 2.3, so GP Premium hasn’t quite caught up yet.

When it comes to icons, using swap doesn’t make much sense, as there is nothing to swap the icons with (unlike text, which can fallback to your system font).

Let me know if you have any other questions 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jim]

Thanks for the heads up!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Jim! I’m having the same warning from Google Pagespeed Insights. What value did you end up using for the GP Premium font? Or did you leave it as it was?

[David]

Hi there,

‘fallback’ would be the simplest option. Another user provides his method here:

https://generatepress.com/forums/topic/adding-font-display-to-css/#post-906253

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jim]

David Said:
Hi Jim! I’m having the same warning from Google Pagespeed Insights. What value did you end up using…

I use Swap, so text is always visible upon page load.

[Author]

Posts