title: Bad font rendering - what are the causes, what the workarounds?
body: <p>I am building a website which makes intensive use of the <strong>Bebas Neue</strong> typeface. As I often do, I let <a href="http://www.fontsquirrel.com/" rel="nofollow noreferrer">FontSquirrel</a> to the dirty job for me and I downloaded the pre-build <code>@font-face</code> directly from the Bebas Neue <a href="http://www.fontsquirrel.com/fonts/bebas-neue" rel="nofollow noreferrer">page</a>.</p>
  
  <p>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:</p>
  
  <p>Chrome (pretty bad):
  <img src="https://i.stack.imgur.com/udxY4.png" alt="pretty bad font rendering in Chrome"></p>
  
  <p>Firefox (horrible, my lord have mercy):
  <img src="https://i.stack.imgur.com/Ku1La.png" alt="horrible font rendering in Firefox"></p>
  
  <p>Opera (very decent, that's what I want <em>everywhere</em>):
  <img src="https://i.stack.imgur.com/0gq9W.png" alt="actually terrific font rendering in Opera (yay)"></p>
  
  <p>Safari (perfect):
  <img src="https://i.stack.imgur.com/OeTAq.png" alt="decent font rendering in Safari"></p>
  
  <p>I didn't specify any font rendering or anti-alias options in my CSS; on the other hand, I use <code>normalize.css</code>.</p>
  
  <p>What could be the cause of such a horrible rendering?</p>
  
  <p><strong>Note</strong>: I already posted too many pics for a single question, but I'm using the <a href="http://www.fontsquirrel.com/fonts/grand-hotel" rel="nofollow noreferrer">Grand Hotel</a> font too and God, it's even worse (but each browser behaves consistently, at least).</p>