Most of the time investment was setting up the prerequisites for the various tools. Notable requirements were python, node+npm, Microsoft Build Tools, and Google's Brotli.

I used glyphhanger[1] to apply the actual subsetting. Use the --spider flag to find a list of unicode ranges used on your site. Then you can generate files with something like:

glyphhanger --whitelist="U+20,U+21,U+26-29,U+2C-3B,U+3F-57,U+59,U+61-7A,U+2013,U+2019,U+201C,U+201D,U+2026" --subset=SourceSansPro-Regular.ttf --formats=woff2,woff --css

Then you would add that same unicode-range to your CSS.

I haven't tried this on icon fonts. I tend towards SVGs instead.

[1] https://github.com/filamentgroup/glyphhanger

I do really simple subsetting on my site: rather than trying to figure out which characters are used in which fonts, I just dump all of the site’s contents, and sort out all the characters in it.

A very slightly simplified version of my Makefile, which depends on the original font files found in $(PATH_TO_FONTS):

  .font-subset: $(call rwildcard,,%.html %.md)
   find . -name *.md -or -name *.html -exec cat {} + | grep -o . | sort | uniq | tr -d '\n' > .font-subset

  define FONT =
  static/$(1).woff2: .font-subset
   pyftsubset "$(PATH_TO_FONTS)/$(2)/OpenType/$(3).otf" --text-file=.font-subset --output-file=static/$(1).woff2 $(4) --flavor=woff2

  fonts: static/$(1).woff2
  endef

  $(eval $(call FONT,eta,Equity,Equity Text A Regular))
  $(eval $(call FONT,etab,Equity,Equity Text A Bold))
  $(eval $(call FONT,etabi,Equity,Equity Text A Bold Italic))
  $(eval $(call FONT,etai,Equity,Equity Text A Italic))

  TRIPLICATE_FONT_FEATURES := --layout-features+=ss01,ss02
  $(eval $(call FONT,tt4,Triplicate,Triplicate T4 Regular,$(TRIPLICATE_FONT_FEATURES)))
  $(eval $(call FONT,tt4i,Triplicate,Triplicate T4 Italic,$(TRIPLICATE_FONT_FEATURES)))
  $(eval $(call FONT,tt7,Triplicate,Triplicate T4 Bold,$(TRIPLICATE_FONT_FEATURES)))
  $(eval $(call FONT,tt7i,Triplicate,Triplicate T4 Bold Italic,$(TRIPLICATE_FONT_FEATURES)))

And with that, `make fonts` generates a new version of the fonts, trimming out all the unnecessary glyphs and features, while retaining ss01 and ss02 for Triplicate. On Arch Linux, this depends on the python-fonttools package for pyftsubset, and the python-brotli package for --flavor=woff2.

It would be possible to do much better: to identify which characters are rendered in which fonts, which sequences of characters are employed (so that you can trim kerning and ligature tables), things like that; but this does a good enough job for me. (We’re talking about differences of probably less than half a kilobyte in a <20KB file.) I use only English text on my site and I control all the content, so I don’t need to worry about unicode-range splitting.

Concerning icon fonts: this technique would work for it, but for myself I refuse to use icon fonts because they’re fundamentally moderately bad: you can’t trust fonts to load at least in part because quite a few users simply have them disabled for performance or accessibility. There do exist icon fonts that have an almost tolerable fallback, where they use ligatures so that the sequence of letters “envelope” becomes an envelope, “twitter” becomes a Twitter logo, &c. so that screen readers will read the name of the icon without you needing to worry about aria-label and other related properties, but the icon name is normally not the text you should have there, so it’s kind of a waste after all that. Your options are better with something like inline SVG icons or the the inline SVG sprite technique. (See https://icons.getbootstrap.com/ for an example.) Also avoid using just icons with no labels, humans perform enormously better when there are labels on their buttons.