Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jagged font on Windows - Chrome & Safari

Tags: font chrome fonts

Jagged font on Windows - Chrome & Safari

Problem

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).

Problem courtesy of: Rob

Solution

@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.

Solution courtesy of: addedlovely

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Jagged font on Windows - Chrome & Safari

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×