title: How can I stop this ugly font smoothing with custom fonts in CSS?
body: <p>I have some buttons my page using a custom font face using the CSS and files generated by the <a href="http://www.fontsquirrel.com/fontface/generator" rel="nofollow noreferrer">Font Squirrel generator</a>.</p>
  
  <p>When the font's colour is black, they display fine...</p>
  
  <p><img src="https://i.stack.imgur.com/7iVjn.png" alt="Black on green"></p>
  
  <p>However, when I change the colour to something else, the text seems to have a smoothing that bleeds the characters into each other and generally makes the characters look too <em>thick</em>...</p>
  
  <p><img src="https://i.stack.imgur.com/WS5i0.png" alt="White on black"></p>
  
  <p>I've played around with <code>font-smooth</code> property and a few other things, but have been unable to get it to work...</p>
  
  <p>I don't think it's too relevant but the CSS for these buttons are...</p>
  
  <pre><code>color: #FFFFFF;  
  display: block;
  padding: 1em 0.3em;
  position: relative;
  text-decoration: none;
  z-index: 10;
  font-family: BebasNeueRegular,Arial,Sans-Serif;
  font-size: 22px;
  list-style: none outside none;
  text-align: center;
  text-transform: uppercase;
  </code></pre>
  
  <p>The background is a separate element.</p>
  
  <p>How can I get the white text to appear like the black text?</p>
  
  <p><sup>(It may be hard to tell the difference between the two, but my boss insists it is there.)</sup></p>