Add font-display: swap to fonts.css

[Gabriel Torres]

Hello,

Evaluating our website with Google's Lighthouse, I came across this:

This was easily fixed by editing core > global > framework > fonts.css and adding:

font-display: swap;

To 

@font-face {

I recommend adjusting this in a upcoming release.

More info: https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

Thanks.

[Rikki]

font-display: swap won't really give any benefit to that particular font since it's used for icons - there would be no system font it can use temporarily. We can certainly experiment with font-display: block and see if that would improve how lighthouse sees the page though.

[Gabriel Torres]

Thanks @Rikki! 🙂

 

[SeNioR-]

 

I added a font-display property about a month ago to get rid of warnings. So far there have been no problems.

 

As for the font from Google, Google already uses a new code. IPS needs to update it.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet">

Google added display property at the end.

[Gabriel Torres]

Thanks @SeNioR-. BTW I simply updated our themes to use the default font, this way we don't need to load these fonts from Google in order to improve page load performance.

[SeNioR-]

1 hour ago, Gabriel Torres said:

Thanks @SeNioR-. BTW I simply updated our themes to use the default font, this way we don't need to load these fonts from Google in order to improve page load performance.

Fully Agree. I tested a lot of fonts some time ago. The default font is similar to "Roboto". Except that Roboto is thicker and clearer. But default font is perfectly sufficient and loads immediately.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 

I use Roboto (many top sites use it from my observations) but not from Google servers. I uploaded the font to my server and redirected it to CDN.

Here's the tool https://google-webfonts-helper.herokuapp.com/fonts 

is good because you don't have to load all the charsets, you load the ones you use on your forums like latin-ext which translates into faster loading.

[sobrenome]

On 1/13/2021 at 5:55 AM, SeNioR- said:

Google added display property at the end.

Nice! Just added it!