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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.