Problems displaying Windows fonts with @ font-face in CSS

Question

I have problems with @ font-face on Windows computers (it doesn't matter which browser). It works fine on Linux and OSX.

This is the CSS code I'm using (generated using font-squirel)

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

• On the windows, the fonts "dance." They are not aligned on the baseline.
• On windows, fonts do not look smooth.

Anyone have an idea? Thanks in advance.

Screenshot on OSX & Linux:

_{(source: j3rn.org )}

Screenshot on 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 problem with some of our fonts, and I am sure that it is fixed that installing "Truetype Hinting" means "Keep existing".

Answer 2

I ran into the same problem a few weeks ago. We save vector graphics in a font file to avoid implementing individual images or css sprites. A simple workaround would be to use, for example, font squirrel

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

without (!) an optimization option that processes your font to optimize it for the Internet and sometimes interrupts it due to compression attempts if they do not meet some standards. A possible drawback may be that your files will become a little larger. You can also try this web service:

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

Hope this helps!

Answer 3

Well, with regard to anti-aliasing, windows can be pretty ugly when rendering subtle text. A common trick is trying to apply a text stroke like this:

 -webkit-text-stroke: 0.3px 

As for your underlying problem, this is apparently a problem with the actual font. If you are not attached to @ font-face, I am rather uneven Google Webfonts

You just need to include the css link in your header and then attach the appropriate font to the css class.

Answer 4

Go to the limb here, but I think you downloaded (illegally?) The pre-built Helvetica alternative to FontSquirrel.com "roll-your-own" @ face-kit ... tisk tisk.

The results you get are pretty typical of how the PC displays fonts on the 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 fairly fair (albeit not so pretty) alternative to Helvetica, and it looks good on PC, Mac, etc.