1

I'm working on a rails app that is using twitter bootstrap.

I'm using a custom font (Museo) and it's imported with the css that font-squirrel generated, and it's working without problems locally, but when deployed to the server (I believe linode) the font's wont load or show at all.

This is the code I'm using to import the fonts:

@font-face {
font-family: 'MuseoSlab500Regular';
src: url('museo_slab_500-webfont.eot') format('embedded-opentype');
src: url('museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
     url('museo_slab_500-webfont.woff') format('woff'),
     url('museo_slab_500-webfont.ttf') format('truetype'),
     url('museo_slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
font-weight: normal;
font-style: normal;

}

I tested opening directly the fonts to see if it was a problem with the files, and the files open. The css is compiled in rails via the assets pipeline, so this piece of code is on the application.css123817391838123123 (random number) file. I have no idea if it's a problem of assets pipeline, I think it's strange because it's working everywhere else (chrome, safari, firefox, opera). And when testing this online in IE9, if I change the browser mode to Quirks Mode, the fonts will load.

So, I'm all out of ideas, anyone might know what may be happening here?

Thanks

Antonio Pratas
  • 11
  • 1
  • Do you definitely have a valid doctype declared on the page? Are your fonts definitely in the same directory as your css? – Billy Moat Feb 08 '13 at 16:23
  • @BillyMoat I'm using Twitter Bootstrap, which uses the . One of the strangest things (apart from working locally and only breaking online) is that I'm also using Font Awesoem, a custom icon font that is working with no problem at all in IE, and it's being loaded in the bootstrap_and_overrides file. So I wonder why is one of the fonts working and the other isn't? – Antonio Pratas Feb 13 '13 at 18:39
  • Some ideas here you could try: http://stackoverflow.com/questions/4607560/font-face-works-in-ie8-but-not-ie9 – Billy Moat Feb 13 '13 at 20:51

1 Answers1

0

Try to check Content-Type header of your font files. IE requires it in case of WOFF. In case of IIS just add:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  </staticContent>
</system.webServer>
Václav Dajbych
  • 2,584
  • 2
  • 30
  • 45