This is an old post. It may contain broken links and outdated information.
In a previous post, I discussed how to alter Octopress’s configuration to serve web fonts via the @font-face CSS method. This works great and will get your Octopress site working with locally-served web fonts, but there’s some optimization that can be done on the web server side; specifically, three of the four types of web font files are compressable and benfit from being gzipped by Nginx (or whatever web server you’re using) as they’re served out to your site’s readers.
We use Nginx here at the Bigdinosaur.org compound, and so this post will focus only on how to enable gzipping web font files with Nginx. Instructions for doing this with other web servers are easily locatable via the googles.
But first, mime types
You should already have gzip compression enabled in your nginx configuration—it can provide a significant speed boost to your web site for a negligible amount of CPU usage. Nginx uses a file’s mime type declaration to decide whether or not to apply compression to that file, and so we must first ensure that the four types of web font files have mime types configured. Without a properly configured mime type, the web server won’t really know what kind of file it’s serving; in most cases, this isn’t a problem, since modern web browsers are very good at guessing what type of data they’re receiving, but in this particular case we need our mime types explicitly defined.
The file to edit is /etc/nginx/mime.types. Add the following lines:
application/vnd.ms-fontobject eot;
application/x-font-ttf ttf;
font/opentype ott;
font/x-woff woff;You might already have an existing declaration for eot as application/octet-stream; if so, change it to application/vnd.ms-fontobject as indicated above. Also, svg isn’t listed here because it should already have a mime type defined, so we won’t worry about that one.
Nobody mess with the gzip!
OK, misleading section heading for the sake of humor, because we’re going to mess with the gzip. You’ll want to alter the gzip_types line in /etc/nginx/nginx.conf so that the mime types we’ve just added are included in the list of compressible files. Here’s how mine reads:
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/rss+xml text/javascript image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype;The woff format isn’t included here because it’s already compressed, so adding it would gain us nothing.
To verify that your web fonts are being served compressed, you can take a peek at your site’s headers as pages load, or you can go hit up Google’s Page Speed Online tool, which will tell you whether or not the web font files it receives as it benchmarks your site are compressed. It also has a bunch of other handy tips and tricks for decreasing page load time, so it’s a good site to check out anyway.
For an idea of exactly how many bytes you’re saving from gzipping web fonts, check out this article on phpied.com. It usually results in a reduction of 40-50%, which makes this an excellent, low-effort tweak that you definitely should do.