How to gzip @font-face example?

Question

Can someone provide an example of how to gzip a webfont kit? The generator provided me with this code...what needs changed around?

@font-face {
    font-family: 'DesigersBold';
    src: url('desib__-webfont.eot');
    src: url('desib__-webfont.eot?#iefix') format('embedded-opentype'),
         url('desib__-webfont.woff') format('woff'),
         url('desib__-webfont.ttf') format('truetype'),
         url('desib__-webfont.svg#DesigersBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Solution

Are you using Apache and have access to httpd.conf? If so, is gzip compression already enabled?

You can look for this line:

AddOutputFilterByType DEFLATE

Or

SetOutputFilter DEFLATE

If it's the former, you should be able to add the following MIME types so the directive and parameters look like the one below. The MIME types declared here are for .EOT, .TTF, and .SVG. I pulled them from the mime.types file in my Apache conf folder. I believe .WOFF is already compressed so you do not need to have it gzipped.

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

The latter directive SetOutputFilter gzips all files within the container it is stated in. If this location includes your font files, they should already be gzipped when delivered to the client.