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 fo

Answer 1

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.

Answer 2

One thing you need to check is

.css file and .eot should be in same folder if you do url('HelveticaNeueLTCom-LtCn_0.eot')

or do full url path like src:url(http://www.example.com/path/to/url/Helvetica.eot)

Quotes are optional as far as I know.

ps# I am doing font embedding in my blog for long time, its working fine.

Answer 3

IE won't accept a font that includes a format string in the src descriptor - that second src line could be the culprit. What happens if you remove it (or remove the format string?)

Next - sometimes, IE can be a bit pedantic about whether or not you use quotes around values in CSS. Try font-family: "HelveticaLTCN" instead?

Answer 4

While struggling with a similar problem I've noticed that somehow the DOCTYPE definition affects embedded fonts in IE. When I removed the DOCTYPE definition the font displayed properly.

Answer 5

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.

Answer 6

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