@font-face gzipping – take II
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% | |
This entry was posted on Tuesday, October 20th, 2009 and is filed under CSS, font-face, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
October 20th, 2009 at 1:29 am
[...] UPDATE Oct 19, 09: Gzip all font files except those in WOFF format, more info… [...]
October 20th, 2009 at 2:09 am
[...] @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 [...]
October 31st, 2009 at 12:07 am
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
February 7th, 2010 at 12:34 pm
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>
February 24th, 2010 at 10:47 pm
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.)