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

score 49 · Answer 1 · answered Dec 13 '09 at 03:56

49

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.

answered Dec 13 '09 at 03:56

atsjr

491
3
2

It presents the user with nice very informative options, indeed. Pointing out SVG and WOFF ad suitable (in some cases - and it lists which, too) formats, for example. – ZJR Dec 13 '09 at 04:07
It crashes both Chrome and Firefox in ubuntu oneiric... It is some issue with the file dialog but I can't tell why... :( – tutuca Nov 07 '11 at 05:08
1

I think I'm in love with font squirrel. Thanks so much for the link. – Rob Forrest May 02 '12 at 18:31
helvetica neue is blacklisted from font-squirrel. any other options? – Tomi Seus Sep 04 '12 at 09:08
Font Squirrel fixed my problems I had with the font! it was an old font abandoned by the creator about 8 years ago and had problems, but Font Squirrel fixed the font AND made it work in IE as well!! – BillyNair Dec 18 '12 at 00:36
After trying for hours to fix this issue.. GOOGLE! why isn't this your first result? – Claudiu Creanga Sep 10 '14 at 20:28

score 8 · Answer 2 · answered Jan 24 '13 at 16:33

8

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

answered Jan 24 '13 at 16:33

Dan Palmieri

191
2
8

Sometimes, life can be as *simple* as this... I've had this problem in IE 10,11 when serving a page from a certain url (but serving it locally showed the font correctly). – bvgheluwe Mar 07 '14 at 11:57
2

...but now it broke in Firefox and Safari. – bvgheluwe Mar 07 '14 at 12:36
Then take a look at MahmoudS answer, you need to use src: url(fonts/Aller_Bd.ttf) format("truetype"), url(fonts/Aller_Bd.eot) format("eot") - notice the comma instead of semicolon, then it works. – WoodyDRN Dec 08 '15 at 08:54

score 4 · Answer 3 · answered May 24 '17 at 09:54

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.

score 3 · Answer 4 · answered Feb 03 '14 at 19:15

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!

score 3 · Answer 5 · answered Feb 23 '11 at 10:25

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.

score 2 · Answer 6 · answered Nov 18 '09 at 06:17

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.

answered Nov 18 '09 at 06:17

YOU

120,166
34
186
219

The CSS is all embedded in the HTML document. The HTML document and the fonts are in the same directory. Just in case, I tried using full path URLs instead of relative. Still didn't work. Here is the current code: http://codepad.org/j396KfJx If it matters at all, it's running on localhost. Though I can't see why it would. Any more ideas? :/ – panas Nov 18 '09 at 06:27
*{font-family: HelveticaLTCN;} did you tried with * too for all tags? if that one not works, may be probably you should try WEFT again. I use WEFT, its working fine for me. – YOU Nov 18 '09 at 06:35
Nah man, still failed. Are you on Vista? When ever I tried running WEFT, it would crash at that stage of loading fonts for the first time. I tried setting it to run under Windows 98 (compatibility mode) and same thing happened. What version of Windows are you on? :/ – panas Nov 18 '09 at 06:42
Mine is XP, btw if you could publish your test page online somewhere, then some people could look into it. – YOU Nov 18 '09 at 07:05
I don't have a server setup at the moment which I can upload the fonts + html to. But all the relevant code is in that codepad.org link I posted. The only problem I can think of would be the fonts. The code itself is fine. I guess I'll try getting WEFT working. – panas Nov 18 '09 at 07:20
I was having the same problem with IE. FF and other browsers were fine IE was not. I had tried several online EOT generators and WEFT, which is a horribly buggy program by the way. What I am concluding is that they created invalid fonts. Tried finally using font squirrel, and it works perfectly. It's possible you have invalid or corrupted font files as well. – Jestep Oct 22 '10 at 20:42

score 1 · Answer 7 · answered May 05 '13 at 08:35

1

The best definition for font-face is:

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

answered May 05 '13 at 08:35

Mahmoud Saleh

33,303
119
337
498

Not in IE, so it seems. – bvgheluwe Mar 07 '14 at 12:44

score 1 · Answer 8 · answered Mar 07 '14 at 13:09

What worked for me is the following declaration:

@font-face {
    font-family: 'Frutiger45LightBoldItalic';
    src: local('☺'), url('../font/frutiger-bolditalic-webfont.woff') format('woff'), url('../font/frutiger-bolditalic-webfont.ttf') format('truetype'), url('../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH') format('svg'), url('../font/frutiger-bolditalic-webfont.eot');
}

So there is only 1 src attribute and .eot is at the end of it, without question mark.

What I tried before and didn't work:

putting .eot on a separate line (before or after the other src)
putting a question mark after .eot

score 1 · Answer 9 · answered Sep 07 '18 at 08:30

You could convert your TTF font to the modern formats (ie. WOFF) using Transfonter and then use a strong @font-face like this:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Source: https://css-tricks.com/snippets/css/using-font-face/

maikel · Answer 10 · 2013-04-17T12:59:43.733

0

this code could solve my problem in IE:

  @font-face {
      font-family: 'kurdish';
      src: url('font/zkurd_aras.eot?') format('eot'), url('font/zkurd_aras.woff') format('woff'), url('font/zkurd_aras.ttf') format('truetype');}

edited Apr 17 '13 at 12:59

answered Apr 17 '13 at 12:38

maikel

1
1

score 0 · Answer 11 · answered Nov 18 '09 at 05:40

0

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?

answered Nov 18 '09 at 05:40

arcwhite

176
5

I added quotes to each font-family and removed the second 'src' from font-face. Still didn't work. Might give this program a go: http://code.google.com/p/ttf2eot/. I'll report back on the results >. – panas Nov 18 '09 at 05:46

score 0 · Answer 12 · answered Feb 10 '14 at 16:05

0

It's always better to direct the font-face attribute locally and not online, e.g. url('../fonts/font-name.eot'). IE and other browsers won't "see" the fonts when you are running your webpage on a local server.

answered Feb 10 '14 at 16:05

kef

1

score 0 · Answer 13 · answered Jan 11 '16 at 17:47

0

One thing that is special about IE is that it requires the font-family name to be the exact same as the name found in the font's properties. While Chrome and others let you name the font-family what you want, that's not the case for IE

answered Jan 11 '16 at 17:47

Alex

11
1
4

Hi, how do you find out what name is in the font's properties? Is there a font property file somewhere? Do you need a special tool to open a .eot file to find out the properties of the font? – Simon Green Apr 14 '16 at 09:22
@SimonGreen check out this answer for a good explanation: http://stackoverflow.com/questions/16788330/how-do-i-get-the-font-name-from-an-otf-or-ttf-file – Alex Apr 14 '16 at 17:51

Pere · Answer 14 · 2011-12-11T20:23:58.380

0

I was having the same problem as panas. I converted from ttf to eot using onlinefontconverter.com. Well, it seems that was the problem: I just tryied fontsquirrel.com as atsjr pointed out and everything is working fine!

edited Dec 11 '11 at 20:23

answered Dec 03 '10 at 17:36

Pere

1,068
12
20

score 0 · Answer 15 · edited Oct 29 '12 at 06:02

0

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.

edited Oct 29 '12 at 06:02

user

86,916
18
197
190

answered Jan 19 '12 at 13:29

cezary

1

Internet Explorer @font-face is failing

15 Answers15

Linked

Related