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: Facebook, Twitter, Google+

56 Responses

  1. The small size of EOT files is achieved not only with compression, but with subsetting the font. WETF checks the pages you will use the font for and includes only the characters, used on the pages (actually this behavior is controlled with a setting). This could lead to a situation where you update your site and find out some letters missing or displayed with a default font.

    The reason why ttf2eot does not compress the font is that the compression algorithm is patented, so the tool outputs EOTLite fonts – without the compression and the URL lock-in.

    Anyway, I now I will have to check the configuration of my web server to make sure font files are served compressed, as I use two fonts with all the characters available.

  2. Thanks Gonzo, that makes perfect sense. I saw that WEFT checks the page you want to embed the font on and thought it doesn’t make any sense for a CMS so I probably misunderstood.

    Thanks for clarifying!

  3. [...] Gzip your @font-face files / phpied.com http://www.phpied.com/gzip-your-font-face-files – view page – cached 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… (Read more)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. (Read less) — From the page [...]

  4. [...] Go here to see the original: Gzip your @font-face files / phpied.com [...]

  5. [...] This post was Twitted by omgmog [...]

  6. [...] This post was Twitted by font_face_com [...]

  7. [...] This post was Twitted by Rob_James [...]

  8. [...] This post was Twitted by matty_gibbon [...]

  9. [...] This post was Twitted by codestyle [...]

  10. Thanks Stoyan, this article/insight is very useful.

    FYI, it does not work on Opera 9.5 (build 10063, on Win Vista), and I can confirm it works fine on IE7.

  11. Fantastic article, Stoyan. I’ve been writing a post for the past week and will definitely reference your results regarding gzip.

  12. [...] Stoyan Stefanov: Gzip your @font-face files [...]

  13. Great article. Found via http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/.
    Enjoyed following and reading the links too.

    Thought you would be interested in this… an online ttf to eot converter here…
    http://www.kirsle.net/wizards/ttf2eot.cgi

  14. How did you configure your server to send the fonts compressed?

    A bit of googling seems to suggest that neither truetype nor opentype fonts have a registered mime type, which makes using apache’s deflate.mod (AddOutputFilterByType) rather difficult. Is there another way that I’m missing?

  15. Came up with a solution:

    Use Apache’s ‘AddType’ declaration to add a custom mime type and then use that mime type in the ‘AddOutputFilterByType’ declaration.

    For example, for opentype fonts:

    Addtype font/otf .otf
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/otf

  16. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  17. does not seem to be working in Chrome? (Firefox and IE both OK)

  18. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  19. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  20. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  21. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  22. I was curious if WOFF files get bigger through gzip, since their format is already zipped: http://twitter.com/paul_irish/status/4861975668

    I just did a rough test of this using the woff files on jonathan kew’s demo:
    GenBasR.woff 101,956 bytes
    GenBasR.woff.gz 99,676 bytes

    DeLarge.woff 4,704 bytes
    DeLarge.woff.gz 4,696 bytes

    Konstytucyja.woff 37,680 bytes
    Konstytucyja.woff.gz 37,529 bytes

    Good news, and my fears about ballooning gzip sizes are now allayed.

  23. [...] Gzip your @font-face files / Stoyan’s phpied.com [...]

  24. [...] my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about [...]

  25. [...] файлы шрифта можно просто gzip’ить. Как показывает опыт, можно ужать в два раза. Что вовсе не так мало, при [...]

  26. [...] Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face [...]

  27. [...] Yazı tipi dosyalarımızı sıkıştırabiliyoruz. sunucumuz gzip’i destekliyorsa yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz. Ayrıntılı bilgi için tıklayınız. [...]

  28. [...] auch noch etwas interessantes von stoyan stefanov zum thema: Gzip your @font-face files / Stoyan’s phpied.com und @font-face gzipping – take II / Stoyan’s phpied.com gru, [...]

  29. [...] Yazı tipi dosyalarımızı sıkıştırabiliyoruz. sunucumuz gzip’i destekliyorsa yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz. Ayrıntılı bilgi için tıklayınız. [...]

  30. Great article Stoyan, thanks.

    I’ve created a test page to find out if flushing the buffer early can give pages with @font-face a significant performance boost. Results so far are positive.
    http://www.aaronpeters.nl/sandbox/flush-font-face

    Next step is to test on a more normal webpage (external CSS in the head, etc.). I’ll ping you when I have the results of that test.

    Keep up the good work.

    - Aaron

  31. This still doesn’t help much with asian typefaces. The common asian website features hideous designs anyway, but my problem is rather with the extreme (2-5 megs) size of the required fonts. And since most western users don’t have these fonts, it’s kind of required to include it in css. But downloading that big files is not always possible, nor convenient. Any idea for this problem?

  32. Came up with a solution:

    Use Apache’s ‘AddType’ declaration to add a custom mime type and then use that mime type in the ‘AddOutputFilterByType’ declaration.

    For example, for opentype fonts:

    Addtype font/otf .otf
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/otf

    http://www.doktortr.net/

  33. EWP! WEFT! W3C! WURT!

  34. hi!
    can anyone tell me how should i configure in my .htaccess file to render my pre-gzipped font file? or can i pre-gzip my font file?
    i am newbies on web coding and sorry if i’m asking a stupid question :D

  35. I know this post is old. Just wanted to let you know that the fonts you used in the fonts test page; http://www.phpied.com/files/fonts/fonts.html return an MIME type of text/plain.

  36. hi there im a bit of a newb to this and i just cant seem to get my head round this i dont know wether you name the actual fonts gzipper or the gziped files either way i cant seem to get it to work for me and i would like to have it working as it seems a very good solution :-)

  37. [...] should also gzip @font-files like EOT, TTF, OTF, with the exception of WOFF. Average about 40% to be won there with font [...]

  38. Kevin Brubeck Unhammer

    dan, this page has a possible .htaccess file:
    http://wiki.dreamhost.com/Htaccess_tricks#Faster_Page_Load_Times_.2F_Bandwidth_Saver
    just change the include file line to something like

    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif|eot|otf|svg|ttf)$

    see also http://articles.sitepoint.com/article/web-site-optimization-steps/2

  39. [...] Stoyan Stefanov: Gzip your @font-face files – http://www.phpied.com/gzip-your-font-face-files/ [...]

  40. I tried using your solution for my school project, and when I use it on my local computer, font-face doesn’t load the gz archive, instead it uses the uncompressed font file that is placed in my root directory, and when I remove that file from the root, font-face property doesn’t work anymore, so is there any possible workaround?

  41. [...] 为了减少访问数据下载量,我对blog启用了gzip压缩,包括javascript,css甚至@font-face里用到的字体也可以压缩(via Gzip your @font-face files)。启用gzip的压缩结果是客观的,一个Graublau Web.otf字体从41.464k压缩到了31.528k,压缩率为76.04%。然而用上data URI scheme,即使对CSS开启gzip压缩,由于经过base64转译后字符串本身大大增加了CSS文件的体积,压缩效果大大折扣。 [...]

  42. [...] GZIP all font files except .woff (already compressed) [...]

  43. [...] guess is as good as mine.Here are my recommendations for avoiding the FOUT:Host the fonts on a CDNGZIP all font files except .woff (already compressed)Cache all font files for 30+ days by adding a future expires cache [...]

  44. [...] Nghiên cứu về Web Font và Gzip: http://www.phpied.com/gzip-your-font-face-files/ [...]

  45. [...] GZIP all font files except .woff (already compressed) [...]

  46. [...] yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz. Ayrıntılı bilgi için tıklayınız.Yazı tipi dosyaları ön belleğe alındığı için kullanıcının sonraki ziyaretlerinde daha az [...]

  47. [...] as the files now range from 17-40 KB, which is somewhat more manageable on a mobile platform. Plus @font-face files can be Gzipped for even smaller file [...]

  48. [...] Gzip your @font-face files [...]

  49. [...] но, мне кажется, это дело вкуса. Шрифт в этом формате лучше других сжимается при помощи gzip, но не поддерживается Файрфоксами и [...]

  50. [...] но, мне кажется, это дело вкуса. Шрифт в этом формате лучше других сжимается при помощи gzip, но не поддерживается Файрфоксами и [...]

  51. Good info. Lucky me I recently found your site by chance
    (stumbleupon). I have book marked it for later!

  52. I seriously love your site.. Great colors & theme.

    Did you make this site yourself? Please reply back as I’m looking to
    create my own site and would like to learn where you got this from or just what the theme is called.
    Cheers!

  53. Hi,
    How can I compress fontawesome-webfont.svg?

    Thanks.

  54. Have you ever considered creating an e-book or guest authoring on other sites?

    I have a blog based on the same topics you discuss and would really like to have you share some stories/information.
    I know my visitors would appreciate your work. If you are even remotely interested, feel free to send me an e-mail.

  55. And it doesn’t need to take a lot of time or effort. These are the things that make Facebook marketing edgy and
    current among the other forms of marketing. Again, realize that running
    without any planning will lead to your frustration.

  56. […] GZIP all font files except .woff (already compressed) […]

Leave a Reply