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 localparameters that allow the browser to use the font if it is installed on the user’s operating system. This feature of@font-facespec 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.
Results
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.