Question

I’m having problems serving web fonts through Rails 3.1, within a Spree 0.70 application using compass (which I don’t think should make a difference)

I have a scss file which contains the declarations:

@font-face {
  font-family: 'RokkittRegular';
  src: font_url('fonts/store/rokkitt-font/Rokkitt-webfont.eot');
  src: local('Rokkitt Regular'),
    font_url('fonts/store/rokkitt-font/Rokkitt-webfont.eot?#iefix') format('embedded-opentype'),
    font_url('fonts/store/rokkitt-font/Rokkitt-webfont.woff') format('woff'),
    font_url('fonts/store/rokkitt-font/Rokkitt-webfont.ttf') format('truetype'),
    font_url('fonts/store/rokkitt-font/Rokkitt-webfont.svg#RokkittRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

These declarations are successfully included in the outputted css, and the font files themselves are stored in:

/app/assets/fonts/store/rokkitt-font/

and contain:

• Rokkitt-webfont.eot
• Rokkitt-webfont.svg
• Rokkitt-webfont.ttf
• Rokkitt-webfont.woff

But when i visit the site the fonts aren’t rendered. I’ve tried visiting the files directly and I don’t get a response. I would’ve expected the browser to try and download the file, but instead all I get is an error 406 response. Other assets in the stylesheets, such as images render correctly. Can anyone help me diagnose this? I was thinking it might be something to do with Mime-types, although I’m not sure.

Thanks in advance

Answer 1

When you use font_url or other rails 3.1 asset helpers you don’t need the asset type – in this case: ‘fonts’ – in the url. So the urls should have been:

font_url('store/rokkitt-font/Rokkitt-webfont.eot?#iefix') format('embedded-opentype'),
font_url('store/rokkitt-font/Rokkitt-webfont.woff') format('woff'),
font_url('store/rokkitt-font/Rokkitt-webfont.ttf') format('truetype'),
font_url('store/rokkitt-font/Rokkitt-webfont.svg#RokkittRegular') format('svg');

Which solves the problem. Hope this helps anyone else who comes across this problem.

Guess i’m still getting used to the asset pipeline… chalk this one up as a school boy mistake!