Gabriel Torres Posted January 12, 2021 Share Posted January 12, 2021 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. DamonT 1 Link to comment Share on other sites More sharing options...
Rikki Posted January 12, 2021 Share Posted January 12, 2021 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. sobrenome, aXenDev, SeNioR- and 1 other 3 1 Link to comment Share on other sites More sharing options...
Gabriel Torres Posted January 13, 2021 Author Share Posted January 13, 2021 Thanks @Rikki! 🙂 sobrenome 1 Link to comment Share on other sites More sharing options...
SeNioR- Posted January 13, 2021 Share Posted January 13, 2021 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. sobrenome and Gabriel Torres 1 1 Link to comment Share on other sites More sharing options...
Gabriel Torres Posted January 13, 2021 Author Share Posted January 13, 2021 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. sobrenome and SeNioR- 2 Link to comment Share on other sites More sharing options...
SeNioR- Posted January 13, 2021 Share Posted January 13, 2021 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, Gabriel Torres and WP V0RT3X 2 1 Link to comment Share on other sites More sharing options...
sobrenome Posted October 20, 2021 Share Posted October 20, 2021 On 1/13/2021 at 5:55 AM, SeNioR- said: Google added display property at the end. Nice! Just added it! Link to comment Share on other sites More sharing options...
Recommended Posts