Jump to content

Community

Add font-display: swap to fonts.css


Recommended Posts

Hello,

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

image.png.0786357d2052d3c0f23d997bf1db3390.png

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.

Link to post
Share on other sites

 

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy