Font Metrics Override Descriptors

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