@font-face works in IE8 but not IE9

Question

As described above, I have issues with @font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.

The site is:

bigwavedesign.co.uk/gcc/gcc/

The code used is:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Anyone any ideas why this might be occurring?

Cheers!

=============================================

EDIT

I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?

http://iamthomasbishop.com/

Solution 1

No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.

Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the @font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

---

(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)

Solution 2

I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillz the issue was down to MIME Types.

I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFF question.

1. Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
2. Double click "Mime Types"
3. Click "Add..." in the top right hand corner.
4. In "File name extension:" enter ".woff"
5. In "MIME type:" enter "application/octet-stream"

Hope that saves someone 10 minutes in the future.

Solution 3

For us the trick was to just change the format on the .eot files we're serving up.

Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}

Becomes:

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}

Solution 4

My solution is to declare two different fonts:

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

And then:

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}

Solution 5

Abalore +1

My solution:

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
} 

working in IE 7-9, chrome, opera, firefox.

first line needed for IE 9, second for IE 7-8.

View more solutions