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

Answer 1

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 2

My suggestion: Never use custom fonts in CSS. Embed the fonts in other format like Adobe Flash. Then, display your contents in Flash, so that your problem will not be appeared.

Never trust IE's CSS display ability.

Answer 3

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 4

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.