Font antialiasing issue, driving me mad

Question

I've created an @font face with Font Squirrel, and included it in my CSS:

body {
    font-family:'neouthin';
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.3);
}

However, it's displaying heavily aliased, and I want it to display anti-aliased:

• Site: http://www.tributetotheair.com
• Screenshot: http://cjoint.com/13dc/CLlrV4gUitH.htm

I think the issue is with the transparent background, but I don't know how to solve it?

Answer 1

It depends which browser you're looking at it on - I suspect Chrome?

Each browser handles font anti aliasing differently - this is one of the few times that IE comes out on top, though I believe FireFox also anti-aliases by default.

If your issue is with Chrome, then it's answered here.

Answer 2

There are two problems:

1. The font is very thin and not really suitable for body type. It's a decorative font more suited for titles.

2. The bold text looks extra bad as you're setting Neou Thin to bold, instead of using Neou Bold. This means the browser takes Neou Thin and tries to create a faux bold variant of it, which nearly always looks bad. To fix this, either set the font-family to 'neoubold', or fix your CSS:

   @font-face {
       font-family: 'neouthin';
       src: url('neou-thin-webfont.eot');
       src: url('neou-thin-webfont.eot?#iefix') format('embedded-opentype'),
            url('neou-thin-webfont.woff') format('woff'),
            url('neou-thin-webfont.ttf') format('truetype'),
            url('neou-thin-webfont.svg#neouthin') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   
   @font-face {
       font-family: 'neouthin'; /* FIX: add bold to the neothin family */
       src: url('neou-bold-webfont.eot');
       src: url('neou-bold-webfont.eot?#iefix') format('embedded-opentype'),
            url('neou-bold-webfont.woff') format('woff'),
            url('neou-bold-webfont.ttf') format('truetype'),
            url('neou-bold-webfont.svg#neoubold') format('svg');
       font-weight: bold;
       font-style: normal;
   
   }
   

Answer 3

When generating the font in font squirrel, in the Expert Options, try checking the option Remove Kerning, last option of the Rendering row. It helped me in most cases.

Answer 4

You might want try adding text-rendering: optimizeLegibility;.

It has limited browser support currently, but might help.

Here is more information on the property: http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Answer 5

You can use this:

-webkit-font-smoothing: antialiased;