Subsetting fonts for faster responses and rendering

I load fonts on this site. While this is in tension with my preference for speed and minimal bloat1, it is in harmony with my other design goals for this site. Presentation matters, and when the content is text, typography becomes the centrepiece of design2.

Writing is all about emphasis, drawing attention to things that matter to us. In a font, weight is the language of emphasis, and with Inter Rasmus Andersson has balanced the scales of emphasis perfectly to my tastes.

I use three weights of Inter: Regular, Bold, and Italic, weighing in at 99KB, 106KB, and 107KB respectively. That’s 312KB of total fonts. Pretty heavy given that the HTML – the actual written content – of the average page on this site comes in at a mere 5KB. Fonts can only be so small, they are libraries of vector graphics images after all, but we can certainly do better than 312KB.

I used pyftsubset from fonttools for subsetting. Click to see the command. 

pyftsubset\
  Inter-Bold.woff2 \
  --output-file="Inter-Bold-english.woff2" \
  --flavor=woff2 \
  --layout-features="kern,liga,clig,calt,ccmp,locl,mark,mkmk,\
  onum,pnum,smcp,c2sc,frac,lnum,tnum,subs,sups,\
  cswh,dlig,ss01,ss03,zero"\
  --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
  U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
  U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD"

The Inter-Regular font file contains 2504 characters, represented by 2548 glyphs in 51 languages with 35 layout features. By subsetting the font to only include the glyphs, languages and features I need, I was able to cut that down to 231 characters in 415 glyphs across 5 languages and with only the 12 layout features I’m likely to need. Doing so cut that initial 99KB down to 19KB. Repeating this for each font weight, the result was a saving of 252KB (312KB > 60KB).

In the future I will add continuous-automated glyph-detection to the site buildscript so that any new glyphs/characters I add to the content of the site are picked up in the build pipeline and the font is re-subset to include the new glyphs.

Resources

Creating font subsets by Markos Konstantopoulos

  1. Though I do only load fonts in the WOFF2 format so that clients that do not support WOFF2 – which are more likely to be old devices using metered internet connections – do not incur this payload cost.↩︎︎

  2. If the browser default fonts reflect your presentation ideals then by all means, use them.↩︎︎