How to avoid layout shifts caused by web fonts

Simon Hearne, who has been keeping a closer eye on unexpected layout shifts ever since Core Web Vitals came into play:

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.

How to avoid layout shifts caused by web fonts →

Subsetting web fonts with glyphhanger

glyphhanger is a great tool to work with web fonts, developed by the folks at Filament Group. It serves two goals:

  1. It shows what unicode-ranges are used on a web page:

    # local and remote URLs
    $ glyphhanger ./test.html
    $ glyphhanger
    # 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'
  2. 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:

Installation per NPM:

npm install -g glyphhanger

glyphhanger – your web font utility belt →