css - Bad font rendering - what are the causes, what the workarounds?

Question

I am building a website which makes intensive use of the Bebas Neue typeface. As I often do, I let FontSquirrel to the dirty job for me and I downloaded the pre-build @font-face directly from the Bebas Neue page.

I imported the downloaded stylesheet + fonts directly in my website. What I got is very bad font rendering in such big browsers as Chrome and Firefox. Here's a bunch of screenshots:

Chrome (pretty bad):

Firefox (horrible, my lord have mercy):

Opera (very decent, that's what I want everywhere):

Safari (perfect):

I didn't specify any font rendering or anti-alias options in my CSS; on the other hand, I use normalize.css.

What could be the cause of such a horrible rendering?

Note: I already posted too many pics for a single question, but I'm using the Grand Hotel font too and God, it's even worse (but each browser behaves consistently, at least).

Answer 1

我的字体也有同样的问题。
我通过在我的粗体样式元素上应用较少的 mixin 解决了粗体样式的问题：

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}