@font-face gzipping – take II

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

Since my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about WOFF?

WOFF is a newer format with built in compression and ability to store meta data.

So I took this stnf2woff utility and converted all the TTF and OTF files from my previous tests to WOFF. Below are the results.

Basically, the tests confirm that WOFF is already compressed, it doesn't need to be gzipped by the server and woff file sizes is comparable to the compressed TTF or OTF.

The tables show the original font-file size and the percentage shaved off after gzipping, converting to WOFF and gzipping the WOFF.

TTF to WOFF

font original, bytes gzip saves, % woff saves, % woff gzipped saves, %
AllerDisplay.ttf 95,616 50.04% 51.26% 51.30%
Aller_Bd.ttf 128,368 53.35% 54.34% 54.62%
Aller_BdIt.ttf 123,556 52.30% 53.46% 53.49%
Aller_It.ttf 120,876 51.64% 52.46% 52.55%
Aller_Lt.ttf 132,780 54.24% 55.45% 55.75%
Aller_LtIt.ttf 122,296 53.11% 54.17% 54.26%
Aller_Rg.ttf 134,436 52.86% 53.57% 53.87%
FFF_Tusj.ttf 1,543,648 34.69% 34.69% 34.68%
MarketingScript.ttf 55,160 54.63% 54.86% 54.86%
Sansation_Bold.ttf 19,644 46.72% 46.59% 46.76%
Sansation_Light.ttf 19,568 46.72% 46.52% 46.68%
Sansation_Regular.ttf 19,480 47.78% 47.70% 47.86%
Ubuntu-Title.ttf 15,108 50.54% 49.19% 49.32%
UglyQua-Italic.ttf 184,300 43.64% 44.16% 44.41%
UglyQua.ttf 120,424 50.59% 50.95% 51.58%
Vera-Bold-Italic.ttf 63,208 39.25% 41.39% 42.30%
Vera-Bold.ttf 58,716 37.59% 39.74% 40.53%
Vera-Italic.ttf 63,684 39.34% 41.03% 41.45%
Vera.ttf 65,932 39.07% 41.70% 43.27%
YanoneTagesschrift.ttf 105,016 43.12% 44.54% 45.27%
daniel.ttf 51,984 32.19% 32.03% 32.01%
danielbd.ttf 63,688 36.09% 36.05% 36.03%
danielbk.ttf 88,760 36.12% 36.14% 36.12%
journal.ttf 130,956 41.58% 42.14% 42.12%
Average: 41.48% 41.97% 42.13%

OTF to WOFF

font original, bytes gzip saves, % woff saves, % woff gzipped saves, %
Diavlo_BLACK_II_37.otf 33,964 24.99% 25.05% 24.98%
Diavlo_LIGHT_II_37.otf 33,404 24.69% 24.81% 24.78%
Fertigo_PRO.otf 52,636 32.56% 32.97% 32.90%
Fontin-Bold.otf 30,460 46.54% 46.26% 46.45%
Fontin-Italic.otf 30,636 46.31% 45.89% 46.05%
Fontin-Regular.otf 30,396 47.79% 47.41% 47.61%
Fontin-SmallCaps.otf 29,308 47.39% 46.96% 47.14%
Fontin_Sans_B_45b.otf 24,984 29.65% 30.72% 32.11%
Fontin_Sans_I_45b.otf 24,772 28.43% 29.45% 30.75%
Fontin_Sans_R_45b.otf 25,564 29.52% 30.43% 31.87%
Fontin_Sans_SC_45b.otf 27,384 33.54% 34.68% 36.04%
GraublauWeb.otf 41,464 23.96% 24.12% 24.09%
GraublauWebBold.otf 44,040 27.34% 27.40% 27.34%
Tallys_15.otf 19,996 17.96% 17.32% 17.23%
YanoneKaffeesatz-Bold.otf 55,568 60.58% 60.14% 60.29%
YanoneKaffeesatz-Light.otf 58,328 57.73% 57.70% 58.08%
YanoneKaffeesatz-Regular.otf 58,528 57.83% 57.79% 58.18%
YanoneKaffeesatz-Thin.otf 58,292 58.27% 58.25% 58.66%
pykes_peak_zero.otf 122,832 73.74% 73.21% 73.32%
vollkorn.otf 30,065 16.27% 16.54% 16.47%
Average: 45.40% 45.40% 45.68%

Tell your friends about this post: Facebook, Twitter, Google+

6 Responses

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

  2. [...] @font-face gzipping – take II / Stoyan’s phpied.com http://www.phpied.com/font-face-gzipping-take-ii – view page – cached Since my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about WOFF? — From the page [...]

  3. I read your first, and now second article with keen interest, but coming from a less technical background I was a bit left in the cold in regards to how to implement gzipping for font data. In case anyone else is having similar issues, the way I implemented it was via .htaccess and it seems to work with the simple testing that I was able to do. My .htaccess file is up at http://github.com/klepas/klepas.org/blob/master/.htaccess on GitHub in case anyone wants to have a peak (or review — please tell me if I’m messing something up).

    Thanks again Stoyan — awesome article.

    —Pascal

  4. We are using font-face on my new site – and Simon, I think you are going about it the hard way. We use mod_deflate and it IS much easier – at least so far we’ve been testing and its worked:

    <FilesMatch “\.(js|css|ttf|eot|svg)$” >
    SetOutputFilter DEFLATE
    </FilesMatch>

  5. I’m using the same code as Sandy Allen. Works perfectly for me as well. OTF could also be added. I don’t see any advantage of using a more complicated solution. (Unless mod_deflate.c is not available I suppose.)

  6. […] really say how much it affected the performance, but now my site is optimized. A side note: WOFF files are already compressed so you don’t have to gzip […]

Leave a Reply