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.

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.

Thanks @Rikki! 🙂

 

 

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.

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.

 

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.

 

Google added display property at the end.

Nice! Just added it!