Question

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?

Answer 1

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).