[Support request] Adding font-display to css

[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?

[Tom]

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 🙂

[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?

[David]

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.

[Matthew]

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

[David]

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.

[Matthew]

Ahhhh. Ok. Thanks.

[David]

You’re welcome

[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

[David]

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.

[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

[David]

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 🙂

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

[David]

Well you know Tom – forever improving the performance 🙂

[Riccardo]

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

[Author]

Posts