Gzip your @font-face files

October 10th, 2009. Tagged: CSS, font-face, performance

Adding custom fancy fonts to a web page seems to be all the rage these days. Looking at some examples with Net panel on, I saw some of those font files are 100K which is a pretty big price to pay for an ornament like this. I mean you can build whole pages, with fancy scripts, images, gradients and all, that are less than that size.

Made me wonder about the sizes of those font files and in particular is there an easy gzipping win. Turns out yes - you can and should gzip the custom font files you use with @font-face.

UPDATE Oct 19, 09: Gzip all font files except those in WOFF format, more info...

Quick background

In order to include a custom font on a page you can use Paul Irish's bulletproof way, something like:

@font-face {
  font-family: 'gzipper';
  src: url(yanone.eot);
  src: local('gzipper'), 
         url(yanone.ttf) format('truetype');
}
    
body {
    font-family: gzipper;
}

What's going on here?

  1. You give your custom font a name, like "gzipper"
  2. This line is for IE - src: url(yanone.eot);. It asks for an .eot font file
  3. This line is for pretty much every other browser url(yanone.ttf) format('truetype'). It needs a .ttf font file
  4. That last line has variations, you can use an .otf file instead of .ttf, interchangeably, like so url(yanone.otf) format('opentype')
  5. SVG font file (for Chrome) is also an option instead of, or in addition to, ttf, like: url(yanone.svg) format('svg')

So that leaves us with 4 different types of files:

  • svg
  • ttf
  • otf
  • eot

How about gzipping these?

SVG

SVG is easy, it's an XML file. XML files are plain text files so they must always be gzipped. Potential savings? Anywhere around (and I'm pulling this off my hat) 30-70%.

TTF

Turns out TTF is also mostly a text file, and it can safely be served gzipped. I tested FF 3.5, Opera 10, Safari 4, works everywhere. The test page is here.

Grabbing some files to test from here and one from here (and having my kid's tae-kwon-do lesson to sit through on this beautiful Santa Monica Saturday morning) I gzipped them and compared the results.

On average - 41.48% savings.

font file plain size, bytes gzipped size, bytes savings, %
AllerDisplay.ttf 95,616 47,771 50.04%
Aller_Bd.ttf 128,368 59,884 53.35%
Aller_BdIt.ttf 123,556 58,942 52.30%
Aller_It.ttf 120,876 58,459 51.64%
Aller_Lt.ttf 132,780 60,766 54.24%
Aller_LtIt.ttf 122,296 57,342 53.11%
Aller_Rg.ttf 134,436 63,379 52.86%
FFF_Tusj.ttf 1,543,648 1,008,083 34.69%
MarketingScript.ttf 55,160 25,026 54.63%
Sansation_Bold.ttf 19,644 10,467 46.72%
Sansation_Light.ttf 19,568 10,425 46.72%
Sansation_Regular.ttf 19,480 10,172 47.78%
Ubuntu-Title.ttf 15,108 7,473 50.54%
UglyQua-Italic.ttf 184,300 103,863 43.64%
UglyQua.ttf 120,424 59,502 50.59%
Vera-Bold-Italic.ttf 63,208 38,398 39.25%
Vera-Bold.ttf 58,716 36,644 37.59%
Vera-Italic.ttf 63,684 38,629 39.34%
Vera.ttf 65,932 40,173 39.07%
YanoneTagesschrift.ttf 105,016 59,732 43.12%
daniel.ttf 51,984 35,250 32.19%
danielbd.ttf 63,688 40,701 36.09%
danielbk.ttf 88,760 56,697 36.12%
journal.ttf 130,956 76,506 41.58%

I couldn't help but notice huge differences between different font files, even in this small sample. Sansation_Regular.ttf is 10K while FFF_Tusj.ttf is 1 Meg! So keep in mind to check the size of the font you're about to use, there might be smaller and similar fonts.

OTF

Same thing, testing with some files found here, the results are 45.40% savings on average when gzipping the .otf font files.

font file plain size, bytes gzipped size, bytes savings, %
Diavlo_BLACK_II_37.otf 33,964 25,477 24.99%
Diavlo_LIGHT_II_37.otf 33,404 25,157 24.69%
Fertigo_PRO.otf 52,636 35,498 32.56%
Fontin-Bold.otf 30,460 16,285 46.54%
Fontin-Italic.otf 30,636 16,447 46.31%
Fontin-Regular.otf 30,396 15,870 47.79%
Fontin-SmallCaps.otf 29,308 15,419 47.39%
Fontin_Sans_B_45b.otf 24,984 17,576 29.65%
Fontin_Sans_I_45b.otf 24,772 17,730 28.43%
Fontin_Sans_R_45b.otf 25,564 18,018 29.52%
Fontin_Sans_SC_45b.otf 27,384 18,200 33.54%
GraublauWeb.otf 41,464 31,528 23.96%
GraublauWebBold.otf 44,040 31,999 27.34%
Tallys_15.otf 19,996 16,404 17.96%
YanoneKaffeesatz-Bold.otf 55,568 21,904 60.58%
YanoneKaffeesatz-Light.otf 58,328 24,655 57.73%
YanoneKaffeesatz-Regular.otf 58,528 24,681 57.83%
YanoneKaffeesatz-Thin.otf 58,292 24,324 58.27%
pykes_peak_zero.otf 122,832 32,259 73.74%
vollkorn.otf 30,065 25,173 16.27%

EOT

The case with .eot is a little more interesting (like anything to do with IE, right?). Apparently MS provides software, called WEFT to create those files, but looks like people have hard time making it work.

The good thing about this tool is that it can create compressed .eot files which is excellent. You can see some examples linked to from this MSDN article. Some of those EOTs in the examples are as small as 4K which is totally acceptable. So it's worth the time to figure it out because it can save quite a bit.

The other option to create EOTs is to use the free open source tool ttf2eot and convert TTFs to EOTs. The tool doesn't create compressed files, so generally the size of the EOT is about the size of the input TTF. In this case you must gzip the .eot before you send it to the browser.

So I took my test TTFs, converted to EOT and checked the gzip savings. On average - 41.49% savings when gzipping the uncompressed .eot

font file plain size, bytes gzipped size, bytes savings, %
AllerDisplay.eot 95,806 47,867 50.04%
Aller_Bd.eot 128,530 60,201 53.16%
Aller_BdIt.eot 123,746 59,034 52.29%
Aller_It.eot 121,046 58,554 51.63%
Aller_Lt.eot 132,962 60,863 54.23%
Aller_LtIt.eot 122,490 57,437 53.11%
Aller_Rg.eot 134,594 63,480 52.84%
FFF_Tusj.eot 1,543,820 1,008,160 34.70%
MarketingScript.eot 55,352 25,105 54.64%
Sansation_Bold.eot 19,820 10,531 46.87%
Sansation_Light.eot 19,748 10,489 46.89%
Sansation_Regular.eot 19,668 10,230 47.99%
Ubuntu-Title.eot 15,298 7,533 50.76%
UglyQua-Italic.eot 184,482 103,965 43.64%
UglyQua.eot 120,594 59,598 50.58%
Vera-Bold-Italic.eot 63,458 38,467 39.38%
Vera-Bold.eot 58,934 36,712 37.71%
Vera-Italic.eot 63,914 38,696 39.46%
Vera.eot 66,142 40,249 39.15%
YanoneTagesschrift.eot 105,274 59,875 43.12%
daniel.eot 52,184 35,358 32.24%
danielbd.eot 63,892 40,815 36.12%
danielbk.eot 88,984 56,816 36.15%
journal.eot 131,180 76,536 41.66%

I tried my test page in IE6 and it worked with the gzipping, so I'm assuming IE7,8 are fine too.

Summary

  • Always send your font files gzipped, average 40% to be won, but could be 70% you never know
  • Dig into WEFT to make sure you create small, compressed EOTs
  • Keep an eye on the font file sizes you're about to use, they can be huge. When you have a choice, opt in for the 10K font file and not the 1.5 megs one

links

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov