Rails 3.1rc5 , @font-face (in assets scss) and firefox

I have this strange issue.

Inside the assets/stylesheets/pages.scss (pages is a controller) i have set up a custom font with font-face

@font-face {   font-family: myfont;   src: url('../assets/fonts/my_font.otf'); }

and i call it inside an id.

The thing is that the font loads fine on safari and chrome but it doesnt work on firefox at all.

When i use the exact code on an html file and load it on firefox it works but when i use rails it doesnt. Any clue why?

I have this strange issue.

Inside the assets/stylesheets/pages.scss (pages is a controller) i have set up a custom font with font-face

@font-face { font-family: myfont; src: url('../assets/fonts/my_font.otf'); }

and i call it inside an id.

The thing is that the font loads fine on safari and chrome but it doesnt work on firefox at all.

First I suggest that you view the html source (View > Page Source in Firefox) and copy the complete text. Then paste it into the w3c html validator to check the html is valid. Differences in presentation between browsers is often caused by invalid html.

When i use the exact code on an html file and load it on firefox it works but when i use rails it doesnt.

Have you tried clearing the firefox cache? If that does not sort it then I suggest that it can't be exactly the same, firefox will render it the same whether it has come from erb or raw html. If you just mean a snippet of the html then of course we could be back to the validity issue.

Finally if still not working try Firebug and see if it shows any errors.

Colin

I followed your advice and validated the markup and css at w3c and it passed the validation as an html5 document (and the css also was fine). Cleared firefox's cache as well but still it can't execute the @font- face.

Installed the firebug plugin and from what it seems there's no error... firefox just doesnt load any @font-face i set at all through rails. If i open the (seperate) html file i keep for draft design it works just fine.

Also i connected to the WEBrick server with my iphone to see if mobile safari loads it as well and it turns out it doesnt. So i think i'll skip @font-face and replace it with a png file of that font to make sure it's universally viewable :slight_smile:

Can you try loading the font file in firefox directly?

it works fine when i have the code on a single html file and i load it on firefox when the same code, placed in the appropriate places in rails, is loaded on firefox through webrick then it doesnt work. On google chrome, safari works just fine either way