Adding font-display to css

This topic has 15 replies, 5 voices, and was last updated 4 years, 11 months ago by David.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
March 13, 2019 at 6:02 am #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?

March 13, 2019 at 4:17 pm #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 🙂

March 20, 2019 at 6:31 am #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?

March 20, 2019 at 8:05 am #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.

March 21, 2019 at 1:00 am #845202

Matthew

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

March 21, 2019 at 6:55 am #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.

March 21, 2019 at 10:14 am #845867

Matthew

Ahhhh. Ok. Thanks.

March 21, 2019 at 1:22 pm #845980

David
Staff
Customer Support

You’re welcome

May 21, 2019 at 12:02 am #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
May 21, 2019 at 7:49 am #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.

May 27, 2019 at 12:33 am #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

May 27, 2019 at 4:31 am #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 🙂

May 27, 2019 at 9:35 pm #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.

May 28, 2019 at 2:47 am #912969

David
Staff
Customer Support

Well you know Tom – forever improving the performance 🙂

May 28, 2019 at 4:45 am #913095

Riccardo

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

Posts