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

@font-face fonts on PC generally look a little more ropey, but 'Hinting' the fonts will improve readability.

Try running your fonts through the font squirrel convertor, which can process the hinting as part of the conversion.

http://www.fontsquirrel.com/fontface/generator

As a side note I'd also just not use @font-face for Helvetica, and just rely on people having the font installed, falling back to Arial. Not the closest match, but it will give you the best result.

Answer 2

It appears Chrome does not like the SVG to be called last in the CSS @font-face declaration. Add this after your @font-face { ... } in your CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.svg') format('svg');
  }
}

The @media query targets webkit browsers and tells them to solely utilize the .SVG file. In my experience this improves rendering on Windows Chrome.

CAUTION: This fix could cause another problem in Chrome on Windows 7 or 8, which I have encountered on some occasions: Utilizing this fix sometimes prevents word-wrapping in Chrome on Windows. A very strange behaviour which only occurs sometimes and I have not found a solution for. A question about this has been posted here:

Strange word length issue when using font-face in Chrome