CODEWITHSUNDEEP
cssinternet-explorer-8font-faceopentype
Amanda Kitson
Amanda Kitson

Reputation: 5557

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

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?

Upvotes: 6

Views: 17659

Answers (2)

The Alpha
The Alpha

Reputation: 146269

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

Upvotes: 1

BoltClock
BoltClock

Reputation: 724542

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.

Upvotes: 15

Related Questions