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

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.

Answer 2

As Kwon said, ever browser/OS has different font rendering. It even depends on what your display settings at the OS level is set to (sub-pixel aliasing).
Even more frustrating, webkit/chrome has some font-face rendering bugs as well, such as any text with text-shadow: http://code.google.com/p/chromium/issues/detail?id=23440

Answer 3

Try if fonts blurred in chrome.
body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}
or
a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

Answer 4

A blur effect could appear too when HTML container has an inconsistent size compared to its HTML content markup.
To resolve it, try to fix the size of head container, and be sure it is bigger than child.