@font-face fonts showing blurred on Mac in Safari and Chrome

Question

I'm using two special fonts on my website for headings and subtitles. They are working fine on a PC in IE, Firefox and Chrome. However, on a Mac in Safari and Chrome the fonts appear emboldened and slightly blurred. The particular fonts I am using are Utopia and Helvetica Neue Condensed Bold. I have generated the font kits using font squirrel based on otf files. I am using the CSS generated by font squirrel. You can see the website at http://shapecast.benmango.co.uk. I also have screenshots comparing the results in the different browsers for Mac and PC at:

The code I'm using for the CSS is:

@font-face {
    font-family: 'Utopia';
    src: url('/fonts/utopiastd-regular-webfont.eot');
    src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
         url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
         url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
}

@font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
    }

@font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
         url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-variant:normal;
}

I have been working on this problem for a few days now and don't seem to be getting anywhere. I did get an improvement when I changed the font weight from normal to bold for the Helvetica Neue bold typeface. I also tried moving the SVG line to the top, but that doesn't help.

Strangely, in Chrome on a Mac, when one of the three main panels are hovered over (under the main header), the font becomes much clearer and it looks as it should. It doesn't make any difference though, on Safari.

I would be grateful if anyone could offer any advice.

Answer 1

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.