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;
}

1) That first screenshot isn't OS X at all, that's Linux only 2) Go back to Font Squirrel's generator, choose the Expert option, and make sure Hinting is enabled. Replace with the newly-generated font files, and see if the rendering improves. — BoltClock, Feb 14 '12 at 11:37
Thanks boltclock, your right, it's a linux screenshot. I tried your suggestion straight away. But i gave no solution. I did see that 'hinting' is checked by default. I just tried it anyhow to make sure. It's also not a caching problem (i gave fonts new filenames and changed the css filepath). — Jeroen Gerits, Feb 14 '12 at 12:00
[I've tried this answer](http://stackoverflow.com/a/9087123/1428241) but i won't work on firefox and also it didn't work fully correct, problem was show utf-8 foreign charahters on chrome/safari/opera. — Barlas Apaydin, Mar 18 '13 at 22:27
Windows turns off font antialiasing on a number of conditions: if the font is large, if the font is small, if it uses Postscript outlines instead of TrueType outlines, etc. — Mark Ransom, Mar 18 '13 at 23:00

score 3 · Answer 1 · answered Aug 12 '13 at 23:38

3

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

answered Aug 12 '13 at 23:38

Simon East

55,742
17
139
133

This fixed our issue with terrible rendering of Montserrat on all Windows browsers. (The i was indistinguishable from the l in smaller type.) Thanks for the tip! – Nate Beaty Jan 21 '15 at 17:14

score 1 · Answer 2 · answered Mar 18 '13 at 22:38

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!

I was already using these websites, and now tried your method; convert fonts without optimizing. It was useless /: — Barlas Apaydin, Mar 20 '13 at 08:57

score 0 · Answer 3 · answered Mar 19 '13 at 05:54

0

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.

answered Mar 19 '13 at 05:54

okcoker

1,329
9
16

These aren't healthiest ways but `text-shadow: 0 0 1px #ccc` will solve our problem also. – Barlas Apaydin Mar 25 '13 at 07:48
They don't work the same way. It really depends on preference and maybe even your color scheme, but in my experience, trying a `text-shadow` didn't provide me with the desired appearance that `-webkit-text-stroke` provided – okcoker Jun 11 '13 at 15:59
Please, note `-webkit-text-stroke` is a **non-standard feature** and Mozilla recommends against using it in production: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) – VL-80 Oct 26 '19 at 17:47

score 0 · Answer 4 · answered Mar 23 '13 at 16:24

Going out on a limb here, but I think you uploaded (illegally?) a pre-web built alternative to Helvetica into FontSquirrel.com's "roll-your-own" @face-kit... tisk tisk.

The results you're getting are pretty typical for how PCs render fonts on screen.

FF Schulbuch Nord: Created in 1991 ($239 if you want to buy it from fontshop.com). http://www.fontshop.com/fonts/singles/fontfont/ff_schulbuch_nord_ot_regular/&s=c

TexGyre on fontsquirrel is a pretty fair (though, not as pretty) alternative to Helvetica, and it looks good on PCs, Macs, etc.

Windows font rendering problems with @font-face in CSS

4 Answers4