Internet Explorer @font-face is failing

Question

I'm trying to get Internet Explorer to render my pretty fonts. It's not working. They work fine in Firefox and I can see in my Apache access logs that IE has pulled the fonts. So it's parsing the font-face CSS tag, just not rendering them.

The site I used to convert the fonts was: http://www.kirsle.net/wizards/ttf2eot.cgi. I tried that WEFT tool by Microsoft but it wouldn't work properly. After installing and opening it, it said 'First time running it, do this...' then it continually hanged.

Here's my CSS:

@font-face
{
   font-family: 'HelveticaLTCN';
   src: url('HelveticaNeueLTCom-LtCn_0.eot');
   src: local('HelveticaNeuel TCom LtCn'), url('HelveticaNeueLTCom-LtCn_0.ttf') format('TrueType');
}

Any ideas as to why IE isn't rendering the fonts?

EDIT: Should also mention, I'm calling the font with:

p .mytext
{
   font-family: HelveticaLTCN;
}

Solution 1

If you've thrown in the towel or you're still struggling with this I strongly recommend font squirrel. It replaces WEFT far better than any of the other online .eot generators. As a huge bonus, it supplies all needed cross-browser formats in one zip file along with a working CSS+HTML sample page. It's the closest thing yet to @fontface nirvana.

Solution 2

Remember that: .eot fonts must be the last one "src". If not, IE will rewrite the config and crash the font.

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}

Solution 3

This worked for me:

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Medium.woff') format('woff');
    src         : url('../fonts/din/DINPro-Medium.otf') format('otf');
    src         : url('../fonts/din/DINPro-Medium.ttf') format('truetype');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Regular.woff') format('woff');
    src         : url('../fonts/din/DINPro-Regular.woff2') format('woff2');
    src         : url('../fonts/din/DINPro-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Regular.eot?');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Medium.eot?');
    font-weight : 500;
    font-style : normal;
}

Notice that I defined the font for IE seperately with a -ie suffix. When using the font I would do something like p { font-family : din-pro, din-pro-ie }. Tested and working from IE5 forward using emulation.

Solution 4

I had the same issues many folks here encountered. The issue turned out to be simply that IE has a shorter character limit on the value of font-family. I gave my font-family a shorter name and it finally worked using the css that font squirrel spit out.

Weird one!

Solution 5

Internet Explorer gets a bit iffy with the other @font-face definitions in there. I previously found this to be of amazing help - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

In short, they recommend the best way is the following. The only change is to add a question mark at the end of the font url. Weird, no?

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

There are a number of other alternatives listed, namely around specifying separate @font-face tags for the EOT file from the others.

View more solutions