user142019
user142019

Reputation:

@font-face is not working in IE7

I have a CSS file in /css and fonts in /images. My CSS code uses @font-face, and it works in IE8, IE9, and all the decent browsers, but obviously not in IE7.

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('../image/chunkfive-webfont.eot');
    src: url('../image/chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url(../images/chunkfive.woff) format('woff'), url(../images/chunkfive-webfont.ttf) format('truetype'), url(../images/chunkfive-webfont.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3 {
    font-family: ChunkFiveRegular, Georgia, serif;
    font-weight: normal;
    text-transform: uppercase;
}

Why does the text still show up set as Georgia?

Upvotes: 0

Views: 777

Answers (2)

PointedEars
PointedEars

Reputation: 14970

If your fonts are in /images, you need to use /images, not /image. That said, your fonts belong in /css; fonts are not images.

Also, according to Paul Irish's article, 'eot' should work better than 'embedded-opentype' (untested).

Upvotes: 1

b1_
b1_

Reputation: 2126

http://www.thecssninja.com/demo/css_fontface/

@font-face {
font-family:InYourFace;
src: url('Ubuntu-B.eot');
// this smile and ? fix your problem
// because IE don't wanl load local font without this hack
src: url('Ubuntu-B.eot?') format('☺'),  
    url('Ubuntu-B.woff') format('woff'),
    url('Ubuntu-B.ttf') format('truetype'),
    url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');
}

Upvotes: 0

Related Questions