@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+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov