CSS3 @font-face not working in IE 9

Question

The following css not workingin IE9. Working in firefox and chrome. Please help...

<style>
    @font-face {
        font-family: 'myFirstFont';
        src: url('fonts/test/MB-ThinkTwice_Regular.ttf');
    }
    @font-face {
        font-family: 'myFirstFont_IE';
        src: url('fonts/test/MMB_ThinkTwice.eot?#iefix') format('embedded-opentype');
    }
</style>
<div style="font-family:myFirstFont, myFirstFont_IE; font-size:64px;">
    This is test TEXT
</div>

possible duplicate of [Css @font-face not working in ie9](http://stackoverflow.com/questions/16710972/css-font-face-not-working-in-ie9) — Raptor, Sep 12 '14 at 11:09
Two things to check -- you have "MMB_" in the second example but "MB_" in the first. Typo in the filename? Also, is the font-family in the EOT file actually named with the trailing "_IE"? — Cᴏʀʏ, Sep 12 '14 at 11:09
*sidenote:* `font-family` should have at least one common font as fallback — Raptor, Sep 12 '14 at 11:09

score 0 · Answer 1 · answered Sep 12 '14 at 11:11

You can combine your font face into one definition with creating a separte font for IE you just need to supply all the required font file types. Example below should work in IE6-9.

@font-face {
    font-family: 'myFirstFont';
    src: url('fonts/test/MB-ThinkTwice_Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/test/MB-ThinkTwice_Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/test/MB-ThinkTwice_Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/test/MB-ThinkTwice_Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

The #iefix is only required for IE6 through 8

CSS3 @font-face not working in IE 9

1 Answers1