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:
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:
Installation per NPM:
npm install -g glyphhanger