CODEWITHSUNDEEP
cssinternet-explorerfont-face
panas
panas

Reputation: 351

Internet Explorer @font-face is failing

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

Upvotes: 33

Views: 82809

Answers (15)

Fred K
Fred K

Reputation: 13910

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/

Upvotes: 1

Zankar
Zankar

Reputation: 248

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.

Upvotes: 4

Muggybear
Muggybear

Reputation: 11

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

Upvotes: 0

bvgheluwe
bvgheluwe

Reputation: 853

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

Upvotes: 1

kef
kef

Reputation: 1

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.

Upvotes: 0

Adam Bales
Adam Bales

Reputation: 51

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!

Upvotes: 3

Mahmoud Saleh
Mahmoud Saleh

Reputation: 33625

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

Upvotes: 1

maikel
maikel

Reputation: 1

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

Upvotes: 0

palmdl
palmdl

Reputation: 311

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

Upvotes: 8

cezary
cezary

Reputation: 1

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.

Upvotes: 0

Pere
Pere

Reputation: 1075

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!

Upvotes: 0

Overflew
Overflew

Reputation: 8192

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.

Upvotes: 3

atsjr
atsjr

Reputation: 491

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.

Upvotes: 49

YOU
YOU

Reputation: 123917

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.

Upvotes: 2

arcwhite
arcwhite

Reputation: 176

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?

Upvotes: 0

Related Questions