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

Answer 3

You can try:

-webkit-transform: rotate(-0.0000000001deg);

This rotates the element just enough to make the browser render it anti-aliased. Don't know what it does for performance, but I didn't notice any difference in rendering.

Solution found here: https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 4

Yes there are. Use an alternative like cufon for smooth fonts.

Answer 5

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.

Answer 6

This is a fundamental difference between how Windows and OS X handle font rendering, so there is little you can do. One hacky fix for Chrome is adding a nearly invisible drop shadow (text-shadow: rgba(0, 0, 0, .01) 0 0 1px) which forces it to antialias the text. Services like Typekit are working hard to fix the problem, such as serving fonts as Postscript outlines, but that doesn't help your problem very much.

Answer 7

This seems to do the trick:

html {
    -webkit-text-stroke-width: .10px;
}