How to Gzip @Font-Face Example

How to gzip @font-face example?

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

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.

can't get iis7 to gzip font-face font files

By default IIS doesn't include those MIME Types in the httpCompression module.
You need to modify your applicationHost.config file in: C:\Windows\System32\inetsrv\config.

This file will affect all your websites and must be opened with a 64-bit text editor in a 64-bit Windows. (Notepad2 64-bit, Notepad, do not use Notepad++)

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
        <staticTypes>
            <add mimeType="text/*" enabled="true" />
            <add mimeType="message/*" enabled="true" />
            <add mimeType="application/x-javascript" enabled="true" />
            <add mimeType="application/atom+xml" enabled="true" />
            <add mimeType="application/xaml+xml" enabled="true" />
            <add mimeType="*/*" enabled="false" />

            <!-- HERE -->
            <add mimeType="image/svg+xml" enabled="true" />
            <add mimeType="application/font-woff" enabled="true" />
            <add mimeType="application/x-font-ttf" enabled="true" />
            <add mimeType="application/octet-stream" enabled="true" />
            <!-- HERE -->

        </staticTypes>
        <dynamicTypes>
            <add mimeType="text/*" enabled="true" />
            <add mimeType="message/*" enabled="true" />
            <add mimeType="application/x-javascript" enabled="true" />
            <add mimeType="*/*" enabled="false" />

            <!-- HERE -->
            <add mimeType="image/svg+xml" enabled="true" />
            <add mimeType="application/font-woff" enabled="true" />
            <add mimeType="application/x-font-ttf" enabled="true" />
            <add mimeType="application/octet-stream" enabled="true" />
            <!-- HERE -->

        </dynamicTypes>
</httpCompression>

These are my personal settings to compress SVG, WOFF, EOT and TTF files.

Then simply type iisreset in your command line to reload the config in IIS, or restart your computer.

UPDATE

Woff and Woff2 files are already compressed, so you don't need to do this. In fact, the client will lose performance if you gzip those.

How can I gzip my JavaScript and CSS files?

You can use apache's mod_deflate to automatically compress your files on the fly.

Example:

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript

[edit]

To check if your apache server has already output compression enabled, put the example above into an .htaccess file. Then load an html or js file via the server and check the headers for "Content-Encoding", if it says gzip or deflate, it is enabled.

Why doesn't Google compress their webfont CSS?

@Blazemonger's point about compression algorithms costing more than transmitting the whitespace is not very accurate because, knowing Google, they've probably hard-coded that whitespace anyway (i.e., it's not generated by humans or even a specific generator for CSS, just a fixed string).

Now, there's a few things to consider:

It's easier to developers to understand what Google Fonts is doing if they can read the generated code.
Those "developers" may be just designers that can scratch some code together, not enough to know that you can pretty-print CSS. It's easier for them if the code's readable to begin with.
Google probably GZips that. In Huffman coding, it doesn't matter if a fixed string is always a ; or twenty spaces, it's going to occupy roughly the same lenght overall. GZip will perform especially well on evenly-spaced stuff like this sort of generated code.
You mention a saving of 107 bytes. Did you consider that the HTTP headers alone may be larger than that? (They are). Also, if Google hosts Youtube videos in 1080p for free (4K to come soon), 107 bytes is likely laughing matter to them.

@font-face flash of unstyled text in internet explorer 9

To prevent the FOUT in IE9, you can embed the TTF-Font-File in CSS via base64-encoding
(This solution works in all Browsers)

Be shure to deliver EOT files to IE <=8

<!--[if (lte IE 8) & (!IEMobile) ]>
    <link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->

Put in your @font-face-rule (fontsquirrel recommended)

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('MaidenOrange-webfont.eot');
    src: url('MaidenOrange-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Next step, include the @font-face-declaration for all other browsers (IE9+ supports media-queries more info:

<link rel="stylesheet" media="screen and (min-device-width: 1px)" href="styles/fontface.css" />

Put in your @font-face-rule with the TTF-file via DataURI(base64-encoding):

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('data:application/octet-stream;base64, [your-base64-data]') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Therefore use fontsquirrel to generate the DataURI -> expert mode.
Nice to know: IE8 supports dataURI until 32KiB. IE9 doesn't have such limitation.

DataURI Generator for all types of files: click here

live demo from above

To improve the download-time

deliver just the characters you need via unicode-range: http://www.w3.org/TR/css3-fonts/#unicode-range-desc
This will cut down the download time and file-size that have to be download (works in IE9+ and newer Browsers, otherwise the whole font will be downloaded)

@font-face {
    font-family: foo;
    src: url('foo.woff');
    unicode-range: U+31-33;
}

And the next step you can apply this to set expiration dates for it via .htaccess on apache servers to let the Web-Browser know, he should cache the font-files:
This would leave the flash of unstyled content definitely on a revisit.

<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(eot|woff|ttf|svg)$>
        ExpiresDefault "access plus 10 years"
    </FilesMatch>
</IfModule>

And then compress the font-files for faster download (via .htaccess-file):

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

WOFF-files have allready a gzip compression built in.

You can create a .htaccess-file on your server and write this properties into.
Works well on Apache-Servers :)

More details:

Live example: http://georgepantazis.com/demos/fontface-datauri/

Paul Irish about FOUT: http://paulirish.com/2009/fighting-the-font-face-fout/

Compatibility details and checklist: http://www.aaronpeters.nl/blog/IE9-performance-checklist

How to use font-weight with font-face fonts?

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

With GZIP, Can I write 'Sloppy' CSS (and other type of code) code?

It depends on what you try to achieve:

If .foo and .bar need to have the same colour, you´re better of using the first method because it is easier to maintain.
If your first statement is a result of you manually optimizing your file-size, and it´s just a coincidence that .foo and .bar have the same properties, I would definitely split it and use the second solution.

In the end gzip and / or a css compressor will handle the file size so I wouldn´t worry about that.

Worry about maintainability and readability instead.

css - embed font both for IE and FF

Font-face syntax is tricky, particularly with IE. Please use the one we developed here, which is cross-browser tested. http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

It looks like this:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

How to Gzip @Font-Face Example