Jump to content

Add font-display: swap to fonts.css

Gabriel Torres

Recommended Posts


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;


@font-face {

I recommend adjusting this in a upcoming release.

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


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

  • 9 months later...
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...