If you use @font-face (like I do) to enable cool custom fonts on your website, please read this article. I love @font-face to more effectively choose nice fonts for my website, but I never liked the 200-400 KB .ttf files that the user had to download in order to view the fonts. I did a little research and realized that I could simply add these heavy files to the Gzip process in my .Htaccess file (If you would like to read more about Gzip, click here). Turns out that it is very simple, just specify the type that you want to be added along with its corresponding file extension, then add that file type to your current list of file types to Gzip, below is the code needed to Gzip all files along with .ttf, .otf and .eot (three file types used in the @font-face process).

Code

Here is the code that enables Gzip for only .otf, .eot and .ttf files.

#Gzip
<ifmodule mod_deflate.c>
<ifmodule mod_mime.c>   #Checks if your server supports Addtype
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
</ifmodule>
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
</ifmodule>
#End Gzip

If you want to apply this to other files on your site at the same time (as almost everyone would), then here is the code that enables Gzip for .otf, .eot and .ttf files along with all the other files you would normally use on your website. The code without Gzip enabled for the font files can be found on my page about Enabling Gzip.

#Gzip
<ifmodule mod_deflate.c>
<ifmodule mod_mime.c>   #Checks if your server supports Addtype
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
</ifmodule>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript text/text font/opentype font/truetype font/eot
</ifmodule>
#End Gzip

Yes, it is really that simple. You may ask "How effective is this method?". Well, before enabling, I had two .ttf files that totaled around 450 KB, afterward they only totaled 208 KB! You do the math, that is a 54% reduction! I highly recommend this if you use @font-face.

Enabling Gzip

If Gzip has intrigued you, visit my page about Enabling Gzip for more details about what it does and how to enable your website to use the power of Gzip.


Hosted By:

SkyToaster, Simple Quality Hosting


Nibbler report