Question

The problem

How it should look (Chrome 16 on a Mac).

_{(source: ddesign.si)}

How it looks (Chrome 16 on Windows 7)

_{(source: ddesign.si)}

How it looks with bigger font-size

_{(source: ddesign.si)}

Description

I’m using Font Squirrel’s generator for my css code.

font-family: 'Conv_Gotham-Light';
  src: url('fonts1/Gotham-Light.eot');
  src: local('☺'), 
       url('fonts1/Gotham-Light.woff') format('woff'),
       url('fonts1/Gotham-Light.ttf') format('truetype'),
       url('fonts1/Gotham-Light.svg') format('svg');

Tried solutions

I tried many solutions (replacing font order (svg on top), adding text shadow, adding -webkit-text-stroke, -webkit-font-smoothing, etc.), but none of them worked.

What files are requested?

It works correctly on IE 9 on Windows 7. I’ve searched through apache logs and found out that IE on Windows requests the .woff file, but Chrome 16 on Windows 7 requests .ttf file and after the “svg fix” requests .svg and .ttf.

What now?

So what is going on and how can I fix this?

Answer 1

It’s because the font is missing hinting, as already noted. Mac OS always strips away the hinting data anyway, as its rasterizer “auto-hints” the font itself.

However, there is a great little software which uses the automatic hinting of FreeType and embeds the data into the file, i.e. it auto-hints the font for you.

See here: http://www.freetype.org/ttfautohint/