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:
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|
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.