Probing for Googlebot Font Support

Wow, it's been a long time since I posted anything. Nothing like having kids to keep you from blogging.

One of the things I keep an eye on for work are the Google Lighthouse scores. The metrics used to calculate the performance score began shifting in v6 to Core Web Vitals. Pagespeed Insights uses Lighthouse for this score as well, which will be important later in the post. Pagespeed Insights gives a good window into the Chrome User Experience Report, so I like to check that regularly as well. The Core Web Vitals switch seems like a good one to me, the metrics are more transparent and seem to have less variance between runs.

We ran into an interesting issue with the CLS, Content Layout Shift, portion of Core Web Vitals on some of our pages. We would run Lighthouse locally in Chrome and see a CLS of bascially zero on all network conditions. We would then run it from Pagespeed Insights against the same page and see a failing score of greater than 0.1. The culprit ended up being the fallback fonts set in our font-family delaration. It had probably been at least 20 years since we thought about it, other than adding a Google font to the font of it a few years ago. We had the fallback font installed locally, but it turned out Googlebot didn't have it. Googlebot fell back to the next font in the list. The next font in the list was not a great alternative to the first two, in hindsight. The browser initially renders text with one of the fallback fonts under the Lighthouse throttling conditions, and then swaps in the Google font once it finishes downloading. The offending font in the list had much different spacing and letter widths than either the Google font or our first fallback font, so some text wrapped in spots for Googlebot and resulted in a CLS shift when the Google font finished loading and swapped in.

The most interesting part of this is figuring out what fonts Googlebot supports. You can't just change the user agent in Chrome, as that will still use all of the fonts from your machine. I wasn't able to find anywhere Google has published a list of fonts installed on thier Googlebot VMs. So there are a couple of options I could think of. Either way required publishing something public facing.

1. Create a page with some client side code which detects the Googlebot user agent, attempts to display fonts, and logs the results somewhere. Could maybe trigger this by doing a live inspection from Google search console.
2. Create a page with the fonts in question and then run it through Pagespeed Insights and view the resulting screenshot.

Using the Pagespeed Insights method seemed much easier, and the screenshot seemed like a much better way of seeing the results. From the original page, I was curious about what web safe fonts are supported by Googlebot, since our initial fallback font was supposedly web safe. I built a page to try each of the fonts in the W3Schools list of CSS Web Safe Fonts that could be run through Pagespeed Insights where they would all be visible. An image of the result is below, along with links to the test page and to run the test page through PageSpeed Insights.

Googlebot installed fonts test page

Run PageSpeed Insights against page

San-serif is used as the fallback for the serif fonts, which are the first 6. Conversely, serif was the fallback for the remaining fonts, which are sans serif fonts. Maybe that's a little weird, but I wanted an obvious visual cue. It's quite surprising which were supported and how many were not. Only half of the serif fonts were supported, and less than half of the sans serif were. (Comic Sans MS? You've gotta be kidding me Googlebot!) Hope this helps someone else!