1

I'm sure I'm not the only one that this has plagued, but I can't seem to find a solution.

@font-face works wonderfully in Firefox, Chrome, Safari with TTF fonts.

as so:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.ttf ) format("truetype");
}

However, I understand that to be used in Microsoft, the font has to be in EOT format, so I converted it using http://ttf2eot.sebastiankippe.com/

And my code looks like this:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

but it's not working in Internet Explorer. I've tried putting two difference lines for src: I've tried using a different converter, different font, and all no go. I'm using IE8.

Also, to use multiple custom fonts, do I need multiple @font-face blocks or I use line them up font-family, src, font-family, src, etc.?

nhahtdh
  • 55,989
  • 15
  • 126
  • 162
Atey1
  • 251
  • 3
  • 10
  • 1
    Note that the fonts bundled with OS X are not licensed for you to make available via web embedding. I don't believe it's possible to license Apple Chancery, but there are other Zapf Chancery knock-offs you can get. – bobince Nov 01 '10 at 22:19

6 Answers6

2

This may help you,

@font-face {
    font-family:"Apple-Chancery";
    src: url('../font/Apple-Chancery.eot'); /* IE9 Compat Modes */
    src: url('../font/Apple-Chancery.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/Apple-Chancery.woff') format('woff'), /* Modern Browsers */
         url('../font/Apple-Chancery.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../font/Apple-Chancery.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight:bold;
    font-style:normal;
}
Rakesh Vadnal
  • 975
  • 1
  • 10
  • 22
  • Internet Explorer has a bug in its parser for fonts. The `#iefix` code is what makes it work in older version of IE. [The answer for this related question asked on SO explains the reason why its works](http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8), and links to another site with further information. – Samuel MacLachlan May 29 '13 at 11:23
2

How about using font squirrel to generate all your files and your code?

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • still not working in ie. works beautifully in firefox, chrome, and safar though, I'm actually going to use that from now on if I can figure out how to make it work in ie. it's great! – Atey1 Nov 01 '10 at 22:21
0

Simpy upload your font on font2web it creates a css file and a demo HTML file. Hope this help you

Rakesh Vadnal
  • 975
  • 1
  • 10
  • 22
0

This page may be useful to you: http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx

In particular, this line:

In Internet Explorer 8 and earlier versions, only one URL value is supported.

I think what you're trying to do may not work right until IE9 is available. It'd be worth getting a copy of the beta (assuming you're running something newer than Windows XP) to test and confirm this.

pioto
  • 2,472
  • 23
  • 37
0

You need to put the IE (eot) one on a separate line, before the other ones.

The correct declaration is:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.eot); /* IE */
  src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

But that's probably not enough to cover all the cases, you're missing svg font type for older chromes, etc.. I'd recommend using the font-face generator from fontsquirel.com, choose the Easy option then check out the generate css file and copy/paste the code and converted font files

Ben
  • 20,737
  • 12
  • 71
  • 115
0

I second the use of Font Squirrel.

You could also take a look at my post Adventures with @font-face which might help you.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73