One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly complex world of text rendering on the web and some techniques to remove FOUT while not incurring a CLS penalty.
glyphhanger is a great tool to work with web fonts, developed by the folks at Filament Group. It serves two goals:
It shows what unicode-ranges are used on a web page:
# local and remote URLs
$ glyphhanger ./test.html
$ glyphhanger https://example.com
# output characters instead of Unicode code points
$ glyphhanger ./test.html --string
# show results for each font-family on the page
$ glyphhanger ./test.html --json
# show results only for one or more font-family names
$ glyphhanger ./test.html --family='Open Sans, Roboto'
It can subset web fonts so that you end up with smaller font files:
# Subset to the glyphs at a URL only using content that matches a specific font-family
$ glyphhanger ./test.html --subset=*.ttf --family='Lato,sans-serif'
Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.ttf (was 145.06 KB, now 24 KB)
Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.zopfli.woff (was 145.06 KB, now 14.34 KB)
Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.woff2 (was 145.06 KB, now 11.37 KB)
From 145.06kB to 24kB, that’s a huge win!
glyphhanger is mentioned in this highly interesting talk “Web Fonts are ▢▢▢ Rocket Science” by Zach Leatherman:
Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.
By using CSS font-display you can tweak how browsers should behave.
The accompanying “Font-display playground” is a small explainer accompanying this talk. In short, the essence of how font-display works can be boiled down to this image:
If you’re using a web font, you’re bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.