{"id":861,"date":"2009-10-10T14:14:17","date_gmt":"2009-10-10T19:14:17","guid":{"rendered":"http:\/\/www.phpied.com\/?p=861"},"modified":"2009-10-20T01:29:21","modified_gmt":"2009-10-20T06:29:21","slug":"gzip-your-font-face-files","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/gzip-your-font-face-files\/","title":{"rendered":"Gzip your @font-face files"},"content":{"rendered":"

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<\/a>, with fancy scripts, images, gradients and all, that are less than that size.<\/p>\n

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<\/code>.<\/p>\n

UPDATE Oct 19, 09<\/strong>: Gzip all font files except those in WOFF format, more info...<\/a> <\/p>\n

Quick background<\/h3>\n

In order to include a custom font on a page you can use Paul Irish's bulletproof way<\/a>, something like:<\/p>\n

\n
@font<\/span>-<\/span>face<\/span> <\/span>{<\/span>\r\n  <\/span>font-family:<\/span> '<\/span>gzipper<\/span>'<\/span><\/span>;\r\n  <\/span>src:<\/span> <\/span>url<\/span>(<\/span>yanone<\/span>.<\/span>eot<\/span>)<\/span><\/span>;\r\n  <\/span>src:<\/span> <\/span>local<\/span>('<\/span>gzipper<\/span>'), \r\n         <\/span>url<\/span>(<\/span>yanone<\/span>.<\/span>ttf<\/span>) <\/span>format<\/span>('<\/span>truetype<\/span>')<\/span><\/span>;\r\n<\/span>}<\/span>\r\n    \r\n<\/span>body<\/span> <\/span>{<\/span>\r\n    <\/span>font-family:<\/span> <\/span>gzipper<\/span><\/span>;\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
What's going on here?<\/h4>\n
    \n
  1. You give your custom font a name, like \"gzipper\"<\/li>\n
  2. This line is for IE - src: url(yanone.eot);<\/code>. It asks for an .eot<\/strong> font file<\/li>\n
  3. This line is for pretty much every other browser url(yanone.ttf) format('truetype')<\/code>. It needs a .ttf<\/strong> font file<\/li>\n
  4. That last line has variations, you can use an .otf<\/strong> file instead of .ttf, interchangeably, like so url(yanone.otf) format('opentype')<\/code><\/li>\n
  5. SVG font file (for Chrome) is also an option instead of, or in addition to, ttf, like: url(yanone.svg) format('svg')<\/code><\/li>\n<\/ol>\n
    So that leaves us with 4 different types of files:<\/p>\n