Font Compression for the Web

During a recent client project, I ran across the issue of really slow loading custom fonts.

The client wanted me to use a font called Nanum Gothic. The TTF for this font is a beefy 2.25MB! On desktop it took ~5 seconds to download on a ~5Mb connection. On my smartphone connected to WiFi, it took several minutes!

I knew that FontSquirrel had some compression options, but when I tried to upload the file it returned an error saying the font was too big – ironic.

Then I came across FontForge, a font editor which allowed me to individually select and remove the glyphs which I knew I didn’t need.

I then exported a TTF from FontForge and ran it through FontSquirrel (now that it was small enough) to create the other file types for my CSS3 @font-face rule.

Here are the file size comparisons:

Before:

File Size
NanumGothic-Regular.eot 2,510 KB
NanumGothic-Regular.svg 34 KB
NanumGothic-Regular.ttf 2,510 KB
NanumGothic-Regular.woff 2,576 KB

After:

File Size
NanumGothic-Regular.eot 17 KB
NanumGothic-Regular.svg 43 KB
NanumGothic-Regular.ttf 29 KB
NanumGothic-Regular.woff 20 KB

 

I’m not sure why the SVG file is actually larger, but the rest have an extremely significant file size difference. The TTF had a 87% compression rate!

For JaL Productions, I am using the AngryBlue font for my logo. FontSquirrel allows you to specify exactly which characters to export, and as I know that the only characters I need are those in “JaL Productions” I managed to save 42KB (51KB before, 9KB after) on the TTF file.

Posted Monday, October 28th, 2013 under Scrapbook.

Leave a Reply

*