IE refuses to interpret @font-face rule, even with eot file first and "src: local('☺'), ..." hack second

Question

I've done a lot of reading on this, and tried a lot of different things, and still no dice. Here's an example of one of my @font-face rules:

@font-face { 
    src: url('/lib/fonts/Museo/Museo500-Regular.eot'); 
    src: local("☺"), 
        url('/lib/fonts/Museo/Museo500-Regular.ttf') format('opentype'); 
    font-family: Museo; 
    font-weight: 500; 
}

I've checked my paths and tried various CSS, and nothing will make the fonts render in IE. Here's an example page that uses all the custom fonts at once:

http://test.thenewhive.com/test/fonts

It looks fine in all other browsers.

Answer 1

I don't know if it actually has anything to do with your IE problem, but the format('opentype') part here is wrong, as your TTF file is a TrueType file. It should be format('truetype').

That being said, I highly suggest you use something like the Font Squirrel @font-face generator to prevent any mistake. http://www.fontsquirrel.com/fontface/generator

If you prefer doing it manually, I suggest you take a look at this article : http://readableweb.com/new-font-face-syntax-simpler-easier/ it does a great job explaining the right syntax to use, just make sure you read it all since there has been some updates to the original post.