Website Font Optimization

When I was setting up my blog originally, I tried to optimize the font download. I only use three glyphs from my custom font so it was a waste of data to download the full font, which was 72KB, just for that. The solution was to create a font subset with only the glyphs I need.

At first I used a tool called FontForge to do that, but it was a very slow and manual process. I also messed up twice so I had to start over each time. When I finally finished I got a 4KB file and I left it at that.

Earlier this week I decided to try again, this time with some better tools. The first tool is called IcoMoon and it allows me to just export the glyphs I need just like the original tool I used, just much easier. But there was an issue, it doesn’t like TTF fonts. So, I used Everything Fonts to convert my TTF into an SVG font. I then imported it into IcoMoon and exported the glyphs I needed.

The resultant WOFF file was just 2KB, but I knew I could do better. I used Everything Fonts again to convert it to a WOFF2 file and that further reduced it to 1KB, which is pretty darn good coming from 72KB.

Lastly, I base64 encoded it and embedded it into my CSS. You don’t have to do this, but I just wanted to avoid an additional request for it. I may revisit this when I upgrade the site to HTTP/2. I decided to leave it in place even with HTTP/2.

View or Start a DISQUS Thread