Windows font rendering problems with @font-face in CSS

Question

I'm having troubles with @font-face on Windows computers (no mather what browser). It works okay in linux and osx.

This is the css code i'm using (generated with font-squirel)

Check the screenshots for the problem.. There seem to be 2 problems

• On windows the fonts are 'dancing'. The are not aligned on the baseline.
• On windows the fonts look not anti-aliased.

Anybody has an idea? Thanks in advance.

Screenshot in OSX & Linux:

_{(source: j3rn.org)}

Screenshot in Windows:

_{(source: j3rn.org)}

CSS code

@font-face {
    font-family: 'SchulbuchNordFett';
    src: url(assets/fonts/schulbuchnord-fett-webfont.eot');
    src: url('assets/fonts/schulbuchnord-fett-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-fett-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-fett-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-fett-webfont.svg#SchulbuchNordFett') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SchulbuchNordNormal';
    src: url('assets/fonts/schulbuchnord-normal-webfont.eot');
    src: url('assets/fonts/schulbuchnord-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-normal-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-normal-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-normal-webfont.svg#SchulbuchNordNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

We had a similar issue with some of our fonts, and I'm pretty sure what fixed it was setting "Truetype Hinting" to "Keep existing".

Answer 2

I was facing the same issue some weeks ago. We are storing vector graphics in a font file to avoid implementing seperate images or css sprites. A simple workaround would be to use for instance font squirrel

http://www.fontsquirrel.com/tools/webfont-generator

without(!) the optimizing option, which processes your font to optimize it for the web and sometimes breaks it due to compression attempts, if they don't fulfill some standards. A possible drawback might be, that your files become a bit larger. You can also try this webservice:

http://fontface.codeandmore.com/indexnew.php

Hope this helps!