2

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): pretty bad font rendering in Chrome

Firefox (horrible, my lord have mercy): horrible font rendering in Firefox

Opera (very decent, that's what I want everywhere): actually terrific font rendering in Opera (yay)

Safari (perfect): decent font rendering in Safari

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

whatyouhide
  • 15,897
  • 9
  • 57
  • 71
  • Now try it on Windows. – Blender May 25 '13 at 23:28
  • I'm not able to, I only have Macs :( **And** no VMs actually, but that's on the to-do list. – whatyouhide May 25 '13 at 23:29
  • It's bad: http://stackoverflow.com/questions/11487427/is-there-font-smoothing-in-google-chrome-because-webfonts-look-very-edgy – Blender May 25 '13 at 23:32
  • Ok, in Chrome it's a bug, but what about Firefox? It's terrible there. – whatyouhide May 25 '13 at 23:34
  • 1
    Each browser/OS combination can have its own way of rendering fonts. If you absolutely must have the same appearance everywhere, the only option is to use an image (but for accessibility you'll need to do some tricks like invisible text over the top) or a plugin (Flash gives you one option for consistent font rendering, though I would strongly discourage you from following that path). You can try using CSS3's text-rendering property (https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering) but it's not well supported. – Dave May 26 '13 at 00:37
  • My mistake, it's not CSS3 but rather a mozilla-specific extension of the SVG spec, hence not being generally supported. But it should help your FireFox issue. – Dave May 26 '13 at 00:39

1 Answers1

0

I had same problem on my font.
I fixed the problem for the bold style with that less mixin applied on my bold style elements:

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
Miguel Bocquier
  • 2,449
  • 5
  • 22
  • 38