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?
- You give your custom font a name, like "gzipper"
- This line is for IE -
src: url(yanone.eot);. It asks for an .eot font file - This line is for pretty much every other browser
url(yanone.ttf) format('truetype'). It needs a .ttf font file - That last line has variations, you can use an .otf file instead of .ttf, interchangeably, like so
url(yanone.otf) format('opentype') - 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
- My gzipped fonts test page
- Configure gzip in hosting environments with variable degree of hostility
- Paul Irish on "FOUT" and more on loading font files
- Paul Irish - bulletproof font face declaration
- Snook's font mastery post
- TTF-to-EOT converter
- WEFT tool for EOTs
- MSDN examples
- Free fonts - awesome
- 10 free fonts
- Free fonts
Comments? Find me on BlueSky, Mastodon, LinkedIn, Threads, Twitter
