Thursday 20 September 2012

Firefox font rejected by sanitzer

TL;DR

If you’re using a CSS pre-processor make sure it isn’t automatically inserting a querystring after the font name.

If it is, this will upset the font sanitizer — remove the @fontface rules from the SCSS file and put them into plain old CSS file and serve it that way.

The Investigation

This is where I started, it’s the output from Firefox’s error console …

 Timestamp: 21/09/2012 07:47:25 Error: downloadable font: invalid version tag (font-family: "IcoMoon" style:normal weight:normal stretch:normal src index:0) source: http://jamiecurle.co.uk/static/fonts/IcoMoon.eot?5ea566a848e5 Source File: http://jamiecurle.co.uk/static/CACHE/css/2325a2792eef.css Line: 0 Source Code: @font-face {   font-family: "IcoMoon";   font-style: normal;   font-weight: normal;   src: url("/static/fonts/IcoMoon.eot?5ea566a848e5"); } 

Here what it looked like, the icon fonts weren’t rendering in the header at the top of the page –

It wasn’t just this site either, it was also affecting [Jo][0] and [Obscure Metaphor][1]. I spent a good ten hours figuring this one out and it drove me nuts.

Here’s what I checked —

  • mimetypes being sent from webserver
  • all headers being sent to the browser
  • the validity of the font files
  • the scss files and the paths to the font files
  • made sure gzip wasn’t doing funky things to the fonts

I even started wondering if it was a cross domain issue, even though all static media is served from `/static/‘. I was going batshit crazy and after ten hours I’d given up. Then out of nowhere I thought I’d check the outputted css on the server. I noticed this

 url(‘/static/fonts/icomoon.woff?21f0f43a87b9’)  
That made me think back to the initial error from the sanitzer
 fonts/IcoMoon.eot?5ea566a848e5 
## The Solution Hmm, I though to myself, could it be the querystring that’s causing the font sanitizer to freak out? So I removed the following from my scss file and put it into a plain old css file –
 @font-face {     font-family: ‘icomoon’;     src: url(‘/static/fonts/icomoon.eot’);     src: url(‘/static/fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’),         url(‘/static/fonts/icomoon.svg#icomoon’) format(‘svg’),         url(‘/static/fonts/icomoon.woff’) format(‘woff’),         url(‘/static/fonts/icomoon.ttf’) format(‘truetype’);     font-weight: normal;     font-style: normal; } [data-icon]:before {     font-family: ‘icomoon’;     content: attr(data-icon);     speak: none; } 
It worked. It turns out that pycss had been added a querystring onto the end of the font files and this was causing the font sanitizer in Firefox to refuse the file. By putting the @font-face rules into a plain css file[^extra], I managed to sidestep the issue. Everyday is a school day [^extra]: If you’re concerned that I now have one extra http request because of the extra css file, then relax — I don’t. [django compressor][3] compresses all of my css/scss into one file and caches the result so that serving is super fast._ [0]: http://jocurle.com [1]: https://obscuremetaphor.co.uk [2]: https://github.com/Kronuz/pyScss [3]: https://github.com/jezdez/django_compressor