How to Make Safari Render Pre-GZipped Web Fonts

After too many sleepless nights, I’ve finally got Safari to render pre-gzipped fonts.

All the fonts in Kernest are pre-compressed on the server (in addition to saving a little bandwidth, it also saves a little disk space and a couple hairs of server performance).

I started with this post by Darren Rush on how to configure Apache to send pre-compressed files, rather than compress on the fly.

While most browsers don’t care if the server does the compressing or if the files are compressed ahead of time. Safari does. Particularly with front-end-oriented files like javascripts, stylesheets, and fonts.

If you take a look, Darren’s code – it ignores Safari (RewriteCond %{HTTP_USER_AGENT} !Safari ).

Turns out Safari just dislikes the idea of javascripts, stylesheets, and fonts using the ‘.gz’ extension.

Yep.

Pre-compress your files – just don’t name them ‘.gz’.

“you CAN’T use the ‘.gz’ extension when serving compressed CSS or JS files to Safari. It knows how to handle gziped files, as long as they don’t have the ‘.gz’ extension (it’s just that weird :)” – sopppas

The convention seems to be ‘.jgz’.

This change is fine – because all reasonable browsers look at the content-type and not the file extension. Unfortunately, the really fast Apache mod_sendfile module doesn’t pass content-type. Now those reasonable browsers now have no idea what they’re getting.

In my testing – the smaller file (~40% savings) and slower serving method is still faster than the larger file size and the faster serving method.