CODEWITHSUNDEEP
htmlcssinternet-explorerfont-face
Jason
Jason

Reputation: 35

Trouble with @font-face in IE

I am trying to use a @font-face kit from fontsquirrel.com. I have pulled everything directly from the files they provide but when testing in IE9 using the developer tools I get the following results:

Browser Mode: IE9, Document Mode: IE9 standards - font renders correctly
Browser Mode: IE8, Document Mode: IE8 standards - font does not render
Browser Mode: IE7, Document Mode: IE7 standards - font does not render

The curious and infuriating thing is when I view the demo file from the @font-face kit it renders correctly in all three of the above situations. And like I said everything is copy/paste from the files provided.

The only difference I can think of is that I am using HTML5 Boilerplate.

Any thoughts would be appreciated greatly.

In Response to the comments:

Here is the font: http://www.fontsquirrel.com/fonts/bebas-neue

And the CSS I'm using: 

@font-face {
font-family: "BebasNeueRegular";
src: url('BebasNeue-webfont.eot?') format('eot'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}

Upvotes: 0

Views: 2294

Answers (1)

ScottS
ScottS

Reputation: 72281

Jason, your font-face code does not quite match what came in the kit I downloaded. Notice the fourth line (I marked with some commented exclaimations) is different than yours.

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

}

Upvotes: 1

Related Questions