As mentioned by my previous blog post, fallback fonts can have a significant impact on the CLS portion of the Web Vitals score. Your main font is a web font from somewhere like Google fonts, but browsers may take some time to fully load it so the page does the initial render with a fallback font and then swap in the web font once it is ready. The closer your fallback font is to the web font, the less the page will shift and the lower the impact on your CLS score. You may have selected one fallback font because it most closely resembles your web font, but something about it isn't quite identical and you see a visible shift during testing. The first tool to try is using @font-face and adjusting some of the CSS properties such as letter spacing, but it will only get you so far because there are some elements of the fallback font which can't be changed with existing CSS. That's where the horribly named font metrics override descriptors (or f-mods) come in.

F-mods are a set of @font-face descriptors added in Chrome 87 which allow changing some of the subtle font differences to try and make the fallback font hold the same space as the web font. I am not a font expert by any means, so I apologize if this could be more accurately described with better terminology. I would highly recommend watching one of the videos from Chrome Dev Summit 2020, Beyond Fast by Jake Archibald, which has an excellent brief segment on these.

Ascent-override - specifies the amount of the font which appears above the baseline.

Descent-override - specifies the amount of the font which appears below the baseline.

Line-gap-override - specifies the amount of whitespace gaps at the top and bottom of each line.

Good stuff, but only supported by Chrome 87 at the moment. These will be ignored by other browsers, so there's no harm in using them now. You get the benefits for those users now so that, most importantly, it will be reflected in the CLS CrUX field data Google will increasingly be using as part of their ranking algorithm. With how new these are, there isn't much information about them yet, and no helpful tools. I needed to develop something to help figure out what values to use for these new bits, which I've made public in Github. It will let you feed in a web font URL and a named fallback font, overlaying the two fonts to help align them. My use case was Google fonts, so the Javascript may need to be adjusted if you're using something else which delivers the actual font file rather than a stylesheet with @font-face values, as Google fonts do. Hope this helps!

F-mods alignment helper

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!