Jagged font on Windows - Chrome & Safari

Question

I'm using custom fonts on my webpage using the following code:

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

This works fine across all browsers on Mac but looking at it on PC on Chrome and Safari it appears jagged. Are there any fixes I could use to make it all look the same? Below shows the difference (Mac on left, PC on right - both on Chrome).

Answer 1

I'm not sure what OS you are using, but you may need to enable ClearType for screen fonts.

In XP: go to the Display control panel, and select the Appearance tab. From there, click Effects. Select the Use the following method to smooth edges of screen fonts checkbox, and then select ClearType in the list.

That has solved the problem for me in the past.