38

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/

12 Answers 12

41

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. ;)

6
  • I have ended up using meta tags to make IE9 perform like IE8 for just this effect. Not ideal as I lose some nice CSS3 effects but better than the horrible font rendering I was stuck with!
    – DanC
    Jan 10, 2011 at 18:16
  • UPDATE! Using this technique I have also got IE9 displaying @font-face although strangely only when everything is wrapped in "font_here" instead of the 'font_here' I originally had. Should this make a difference? I doubt it but follow the layout exactly as displayed by Tobias and it should all work out fine!
    – DanC
    Jan 12, 2011 at 11:29
  • 2
    try this with smiley, but without "" around font name. font-family: LucidaFax-bold; ... sounds stupid, but works for me.. or take a look here: paulirish.com/2009/bulletproof-font-face-implementation-syntax
    – slobodan
    Feb 21, 2011 at 11:43
  • the font files are pretty small and you don't really have a choice if you want to cater to all major browsers
    – Capagris
    Feb 24, 2012 at 15:47
  • @KisGabo you can do it with far fewer font files - see my answer and the browsers I've tested it in. Got it in two. Jun 10, 2012 at 3:46
18

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"

WOFF MIME Type Screenshot

Hope that saves someone 10 minutes in the future.

1
  • We use this same MIME type in IIS ("application/octet-stream") for .eot and .ttf. It's worth noting that we've seen broad compatibility with just those 2 formats - the rest end up just being bloat in the CSS. May 8, 2012 at 23:50
15

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')
}
5
  • 1
    This worked for me. I was already using the correct syntax that Tobias outlined, but my font still wasn't showing up in IE9. Then I realized that I had no format declared for the eot format (just like in Tobias' sample code), so I added what Chris has suggested here and it worked like a charm. Thanks!
    – todd
    Apr 2, 2012 at 22:10
  • 1
    This also worked for me. I was working with FontAwesome which didn't work in IE 9. Just change the format of the .eot to embedded-opentype like Chris did. Chris, could you explain why this fixes the problem though?
    – Julian
    Jul 24, 2012 at 7:12
  • @Julian I don't have a reason for you for why IE9 wants it spelled out - I just created a lot of test cases with variations on formats etc and tested until I found the smallest possible test case that still worked in all the major browsers. Voila. Jul 26, 2012 at 1:52
  • +1 simple changing ('eot') to ('embedded-opentype') made my life perfect again, thanks
    – Paul Brown
    Dec 4, 2012 at 19:10
  • Yes, I'm currently putting off woff usage until support improves - adding it to the above just increases CSS bloat, which we're trying to avoid. But someday. Apr 9, 2013 at 19:46
3

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";
}
3

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.

2

Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?

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

This might be it:

It’s important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven’t heard of documentMode before, Microsoft has put together a guide which explains what it is and how you can use it on your site.

from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

2
  • Sorry for the edit! The .eot file is in the same directory as the css as recommended. It could be a mime type issue although I'm not 100% sure how to explore this type of issue.
    – DanC
    Jan 5, 2011 at 18:33
  • I'm sure it's not - just one of the things that popped in my head. My other thought is that it's a rights issue. I found this post: readableweb.com/testing-shows-ie9-beta-greedy-for-web-fonts and it seems to suggest that MS tests for licensing when deciding whether or not to display the font. Maybe that could explain the local/server discrepancy. I will admit I'm in over my head at this point though.
    – Gregg B
    Jan 5, 2011 at 18:39
2

In IE9 - F12 look at the debug screen see if there are any CSS3117 errors. See also: IE9 blocks download of cross-origin web font

1

Font Squirrel also provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.

It was a breeze to incorporate its output into my site and it did fix the problem perfectly.

0

You should check out this blog post Paul Irish has a few things to say about the problems you are coming across and he comes up with what he calls a 'bulletproof' @font-face statement.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

0

http://www.fontsquirrel.com uses this for its sample CSS which worked OK for the project I was working on.

@font-face {
    font-family: 'QuicksandBook';
    src: url('/Quicksand_Book-webfont.eot');
    src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Quicksand_Book-webfont.woff') format('woff'),
         url('/Quicksand_Book-webfont.ttf') format('truetype'),
         url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
0

I had this problem. Turns out I was missing a comma in the font-family declaration.

0

I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all @font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the @font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.

To fix this, you simple need to make sure that the request serving your font has a Cache-Control response header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.