«
»

Gzip your @font-face files

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

This entry was posted on Saturday, October 10th, 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

48 Responses to “Gzip your @font-face files”

  1. Gonzo Says:
    October 10th, 2009 at 4:17 pm

    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. Stoyan Says:
    October 10th, 2009 at 4:32 pm

    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. Twitter Trackbacks for Gzip your @font-face files / phpied.com [phpied.com] on Topsy.com Says:
    October 11th, 2009 at 9:11 am

    [...] 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. Gzip your @font-face files / phpied.com | My Web Development Bookmarks Says:
    October 11th, 2009 at 9:23 am

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

  5. Twitted by omgmog Says:
    October 11th, 2009 at 3:13 pm

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

  6. Twitted by font_face_com Says:
    October 11th, 2009 at 3:17 pm

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

  7. Twitted by Rob_James Says:
    October 11th, 2009 at 3:23 pm

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

  8. Twitted by matty_gibbon Says:
    October 11th, 2009 at 5:16 pm

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

  9. Twitted by codestyle Says:
    October 12th, 2009 at 1:39 am

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

  10. Aaron Peters Says:
    October 12th, 2009 at 2:58 am

    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. Steve Souders Says:
    October 12th, 2009 at 10:55 am

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

  12. High Performance Web Sites :: @font-face and performance Says:
    October 13th, 2009 at 3:57 am

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

  13. Jim Says:
    October 13th, 2009 at 2:50 pm

    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. Torrance Says:
    October 13th, 2009 at 6:30 pm

    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. Torrance Says:
    October 13th, 2009 at 9:07 pm

    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. Ajaxian » @font-face Is Cool… But Does It Scale? Says:
    October 14th, 2009 at 6:01 am

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

  17. Alistair Says:
    October 14th, 2009 at 6:32 am

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

  18. @font-face Is Cool… But Does It Scale? | Guilda Blog Says:
    October 14th, 2009 at 9:26 am

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

  19. @font-face Is Cool… But Does It Scale? Says:
    October 14th, 2009 at 5:09 pm

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

  20. @font-face Is Cool… But Does It Scale? | Programming Blog Says:
    October 14th, 2009 at 5:18 pm

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

  21. @font-face Is Cool… But Does It Scale? « Articles Says:
    October 14th, 2009 at 7:18 pm

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

  22. Paul Irish Says:
    October 15th, 2009 at 10:47 am

    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. Notes on @font-face | builder2 Says:
    October 15th, 2009 at 1:17 pm

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

  24. @font-face gzipping - take II / Stoyan's phpied.com Says:
    October 20th, 2009 at 1:25 am

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

  25. cssing :: Архив :: font-face оживление Says:
    October 24th, 2009 at 5:52 am

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

  26. @font-face Is Cool… But Does It Scale? - Wasif Hafeez Says:
    October 30th, 2009 at 10:14 am

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

  27. @font-face kullanımı Says:
    November 2nd, 2009 at 5:46 pm

    [...] 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. Todsichere @font-face Syntax - Seite 2 - XHTMLforum Says:
    November 3rd, 2009 at 12:52 pm

    [...] 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. Sevdalimsin.Net Sohbet » Blog Archive » @font-face kullanımı Says:
    November 4th, 2009 at 5:34 am

    [...] 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. Aaron Peters Says:
    November 9th, 2009 at 7:44 am

    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. Vale Says:
    November 22nd, 2009 at 8:48 pm

    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. Shadow Says:
    February 26th, 2010 at 11:13 am

    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. dana Says:
    April 7th, 2010 at 11:20 am

    EWP! WEFT! W3C! WURT!

  34. syzen Says:
    July 18th, 2010 at 11:47 pm

    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. Ameer Says:
    July 24th, 2010 at 8:17 pm

    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. dan Says:
    July 31st, 2010 at 7:25 am

    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. Performance Calendar » Blog Archive » Reducing the payload: compression, minification, 204s Says:
    November 29th, 2010 at 9:46 pm

    [...] 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 Says:
    January 23rd, 2011 at 4:45 pm

    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. @font-face 와 성능 | Clearboth Says:
    July 15th, 2011 at 1:22 am

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

  40. Milan Stanojevic Says:
    December 8th, 2011 at 2:40 am

    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. DoMyself » Blog Archive » Google Buzz产品研究之CSS Says:
    January 20th, 2012 at 10:26 am

    [...] 为了减少访问数据下载量，我对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. ArtzStudio » Blog Archive » Web Font Performance: Weighing @fontface Options and Alternatives Says:
    February 27th, 2012 at 10:48 pm

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

  43. Web Font Performance: Weighing @font-face Options and Alternatives Says:
    February 29th, 2012 at 6:24 am

    [...] 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. Web Font (phần 1): Cơ bản về Web Font | Five Columns (beta) Says:
    March 11th, 2012 at 3:37 am

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

  45. Web Font Performansı: Weighing @font-face Options and Alternatives | Web Performans Says:
    July 10th, 2012 at 2:08 am

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

  46. @font-face kullanımı • Teknozzi.com Says:
    December 10th, 2012 at 8:18 am

    [...] 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. Google Web Fonts – First Thoughts | Design and Development Playground Says:
    February 2nd, 2013 at 8:26 pm

    [...] 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. How to use CSS @font-face | Barkamedia Says:
    April 10th, 2013 at 7:59 pm

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

Leave a Reply