Updating An Old Web Site To HTML5 – Part 5: Google Analytics Opportunity: Ensure text remains visible during webfont load

Google will give you this advice when you rely on a web font; by default when a web font is downloading, the browser will display nothing. Once the font has downloaded, the text will appear, but until then any text using that font is invisible. A better behaviour is to display the text immediately using a system font, download the web font, and then reformat the text using the downloaded web font. This allows the viewer to start reading the text immediately, and will minimize the amount of reformatting that the browser has to do. So how do you actually do this?

The articles that Google links to say that the best way to fix this problem is to set the font-display attribute of the @font-face rule in your CSS file, something like:

@font-face {
    font-family:Gill Sans;
    font-display: swap;
}

All of this came as something of a surprise as my site doesn’t use any web fonts at all; it only uses the built-in browser fonts and, at the time I got this warning, I actually used very few of those. So few in fact, that until recently the “correspondence” style text on my site was shown as Comic Sans, but let’s not talk about that!

So, it was obvious that a third party system on my site was using web fonts and, as with so many other things, if you include something on your site from a third party, Google Analytics blames you for its bad behaviour. Looking more closely at the list of font URLs in the PageSpeed Insights window shows a list that contains URL that look like:

https://fonts.gstatic.com/s/roboto/v20/<various alphanumeric characters>.woff2

As you can see from the URLs these are all links to Google’s Roboto font. There were a few other font URLs as well, and each of them apparently takes a few tens of milliseconds to load. It’s not long, but it’s enough for Google to pick up on, complain about, and to recommend you make changes.

So, how can you fix this?

The advice to add a font-display attribute to the @font-face rule in the CSS file seemed like a good start. Of course, as my CSS file didn’t have a @font-face rule, adding one for each new font seemed like something I should do. I looked through DesignModo’s page on using @font-face, as well as CSS-Tricks. These show how to use the rule to refer to fonts and download them, and then you can specify the font-display attribute

For my site, I added the following entries near the top of my CSS file:

/* Font styles for fonts downloaded from other sites - currently just Google stuff */
@font-face {
    font-family: Montserrat;
    src: url('https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2');
    font-display: swap;
}
@font-face {
    font-family: Roboto;
    src: url('https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2'),
         url('https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2'),
         url('https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2'),
         url('https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2'),
         url('https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2'),
         url('https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2');
    font-display: swap;
}

These entries link to the web fonts from the gstatic.com domain, so that the browser can get advanced notice of the fonts it will need. I also included the font-display:swap entries to ensure that the web page is displayed using a system font until the web fonts are downloaded.

Uploading these changes to the site’s CSS file seemed to fix the problem being reported by Google Analytics – the web fonts were shown as loading in 0ms, although they were still listed on some pages with the same warning of “Ensure text remains visible during webfont load”. Sometimes the fonts that I’d added to the CSS file were still listed as taking 10-30ms to load, which seems odd. I didn’t spend too much more time trying to find out how to fix this, as overall the time to load the fonts is much less than it was, and it’s much less than the time taken to download some of the third party components. For the moment, this feels like a reasonable amount of effort to spend to get a reasonable performance improvement.