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 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'

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 →