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.
Comments are closed