Problem with @font-face

[BranCook]

I’ve been having some trouble getting the font Chunk to look nice on XP and Vista. It looks great on a Mac and Windows 7. Here is the implementation:

@font-face {
font-family: ‘Chunk’;
src: url(‘fonts/webfonts/Chunkfive-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/webfonts/Chunkfive-webfont.woff’) format(‘woff’),
url(‘fonts/webfonts/Chunkfive-webfont.ttf’) format(‘truetype’),
url(‘fonts/webfonts/Chunkfive-webfont.svg#svgFontName’) format(‘svg’);
}

.header {
font-family: ‘Chunk’, Georgia, “Times New Roman”, Times, serif;
font-size: 30px;
color: #FFF;
text-shadow: 2px 2px 3px #000;
margin: 20px 0 5px 20px;
padding-bottom: 5px;
letter-spacing: 2px;
border-bottom: 1px #FFFFFF solid;
width: 290px;
}

Does anyone see any problems with my implementation? I know the issue with ClearType on older Windows OS not being activated by default. I use a windows xp computer at work and turned ClearType on and Chunk still does not look right. It looks like it bold type with an extra border around it.

Thanks in advance
-Brandon

[TheDoc]

Try adding font-weight: normal; to .header.

[BranCook]

Thank you for the suggestions. I went ahead and downloaded the kit from Font Squirrel and used the CSS directly from that which is:

@font-face {
font-family: ‘ChunkFiveRegular’;
src: url(‘Chunkfive-webfont.eot’);
src: url(‘Chunkfive-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘Chunkfive-webfont.woff’) format(‘woff’),
url(‘Chunkfive-webfont.ttf’) format(‘truetype’),
url(‘Chunkfive-webfont.svg#ChunkFiveRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

This seemed to work perfectly.

[Author]

Posts