Search code examples
htmlcssinternet-explorerfont-face

@fontface not working for IE9

I'm having a font-face the menu of my webpage. For all browsers is loading fine except for Internet Explorer. Here's what I'm using in my css:

@font-face{
   font-family: 'MyriadProSemibold';
   src: url('fonts/MyriadPro-Semibold.eot');
   src: local(MyriadPro-Semibold), url('fonts/MyriadPro-Semibold.otf') format('opentype');
}

Fonts are in a folder called fonts that is located in the same folder as the css file. I don't know how to debug this problem is anyone could point out what need to be done in order to make them work for IE9?

Solution

  • I suggest you put the opentype file into the font-face generator. Click on generate and download the .zip file you get.

    Copy the fonts to your webhost and copy the CSS styles in the stylesheets.css into your stylesheet, you can change the name and you need to correct the paths to the new paths. Now it works on FireFox 3.5+, Chrome4+, Opera10+, iPad, iPhone, IE4+ (!) and Safari3.1+.