font-face doesn't appear to be working in IE8?

Question

I have the following lines in my CSS.

@font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") }

In IE9, these show up. In IE8, it's using the fallback font, Arial. How do I get this to work in IE8?

Solution 1

You need to supply an EOT version of your font in order for older versions of IE to embed it. They won't recognize any other format, which is why you're observing the fallback to Arial.

Take your font to the Font Squirrel @font-face Generator and it'll prepare everything for you, including a new set of CSS @font-face rules to use over your existing ones.

Solution 2

Internet Explorer does not recognize your .ttf (TrueType) or .otf (OpenType) font faces in CSS3, at least not yet. IE recognizes an .eot (Embeddable Open Type).

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

Take a look at here

Comments

[Amanda Kitson]

Finally got Font Squirrel to work for me. Love the output! Fantastic! thanks!

[koffster]

Yes, but not ie9 compatibility modes