Incorrect @charset Declaration in Webkit Breaks @font-face

Rails, if instructed to, will cache your CSS and JS assets which is good for a small performance boost. However, as I recently discovered, if the order of your assets causes the @charset declaration to be anywhere but at the top of the concatenated all.css it causes webkit to ignore any @font-face declarations.

I discovered this because I am using the 960 grid css framework for the redesign of the Writer's Block site. With 960, you generally include a set of three CSS files before your own: a set of reset styles, a set of text harmonization styles and finally the grid system styles. What I had done was placed a @charset at the top of my global stylesheet per the W3C specification. Webkit is doing the right thing here but it doesn't log an error when parsing the CSS which I think it should.

Anyhow, removing the declaration got the @font-face declarations honoured again. The trivial solution to this is to simply create a stylesheet that only declares the charset and make this the first in the stylesheet_link_tag argument list. Another solution would be to use the alias_method pattern in Rails to wrap the stylesheet_link_tag found in vendor/rails/actionpack/lib/action_view/helpers/asset_tag_helper.rb with one that injects the declaration right at the beginning.

Hopefully this helps anyone who has run into the same problem.