Windows font rendering problems with @font-face in CSS Windows font rendering problems with @font-face in CSS windows windows

Windows font rendering problems with @font-face in CSS


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

enter image description here


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!


Well as far as antialiasing goes, windows can be pretty ugly when rendering out thin text. A common trick is to try applying a text stroke like so:

-webkit-text-stroke: 0.3px

As far as your baseline problem, that seems to be an issue with the actual font. If you're not attached to @font-face, I'm pretty partial to Google Webfonts

You'd just have to include a css link in your header, then attach the corresponding font to a css class.