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

css internet-explorer-8 font-face opentype
Amanda Kitson picture Amanda Kitson · Mar 1, 2012 · Viewed 17.6k times · Source

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?

Answer

BoltClock picture BoltClock · Mar 1, 2012

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.

Related questions

IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8 I have a page …

Read More
IE8 web font iframe bug workarounds

This blog post (slightly annoying page there) (and that's not my blog by the way) describes a bizarre bug I ran into yesterday in Internet Explorer 8 only. The bug involves .EOT web fonts and <iframe> elements. I haven't …

Read More
Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML: <div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS: div { width: 60px; height: 60px; border: 1px …

Read More