@ font-face on Chrome 16 on Windows 7 looks somehow edible

Question

Problem

How it should look (Chrome 16 on Mac).


_{(source: ddesign.si )}

What it looks like (Chrome 16 on Windows 7)

_{(source: ddesign.si )}

What it looks like with a large font size
_{(source: ddesign.si )}

Description

I am using the Font Squirrel 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'); 

Trial solutions

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

What files are being requested?

It works correctly in IE 9 on Windows 7. I looked in apache logs and found that IE on Windows requests a .woff file, but Chrome 16 on Windows 7 requests a .ttf file, and after "svg fix" it asks for .svg and .ttf .

Now what?

So what is happening and how can I fix it?

Answer 1

This is because there is no hint in the font, as already noted. Mac OS always discards hint data, as its rasterizer "hints" at the font itself.

However, there is a lot of small software that uses FreeType automatic detection and inserts data into a file, i.e. automatically determines the font for you.

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

Answer 2

The font is missing. When Windows fonts are missing or fragments are added, you can usually blame the TTF hint. Run the font through the Font Squirrel Generator and it should fix your problem.