Font Subsetting

In my last entry, Logo Implementation, I outlined how much space I thought I could save by using font subsetting, which is loading only the glyphs needed for my logo. Unfortunately, I was not able to get it to work.

The resource, Web Font Optimization gave me a better understanding with which to tackle the problem. I identified the font subset-related CSS that I generated with Transfonter, then copied it and the code for my logo over to a pen on Codepen to sandbox it. I also added two complete character sets in each of the fonts because the issue I was having was that both fonts were loading in their entirety when I only needed six in one and five in the other for my logo.

Eventually I was able to identify two issues:

  • An incorrect file path was preventing the CSS files with the subsetted fonts from loading, which apparently I had fixed by pointing to the CSS with the entire Latin character set for each font. This was easy to fix.

  • Both the full font and subsetted CSS included src local parameters that allow the browser to use the font if it is installed on the user’s operating system. This feature of @font-face spec is useful for those rare visitors who have these two fonts installed, but in my case it prevented me from being able to verify that the subset of characters I wanted to load were rendering correctly for users who do not have them. I ended up disabling the font on my system and commenting out the CSS call for local source files.

Here’s the pen which shows how I did it:

See the Pen Font-family Subset Test by Alan Sloan (@skewedmaker) on CodePen.


Here’s how the file sizes and savings work out based on what the Dev tools on Chromium on Ubuntu show:

Typeface Complete (kB) Subset (kB) Savings
Granular BRK 21 8.1 61.9%
Zypherean BRK 18.1 12.3 32%
Total 39.1 20.4 47.82%

Next Steps

Here’s what I’m thinking of tackling next:

  • Home Page Optimization: When viewing my site on my mobile phone this morning I saw a FOUT (flash of unstyled text) which indicates the CSS for the logo isn’t prioritized to load first and the other assets on the page are taking a long time to load. Of course having a giant page with every blog post and corresponding thumbnail doesn’t help either.

  • Stats for Other Browsers: Less critical but still interesting will be to collect stats on other browsers to find out how/if the font-subsetting work. The article on web font optimization said that each browser will load the first resource it can use and ignore the rest.