How can I stop this ugly font smoothing with custom fonts in CSS?

Question

I have several buttons on my page using a custom font, using CSS and files created by the Font Squirrel generator .

When the font color is black, they display small ...

However, when I change the color to something else, the text seems to have anti-aliasing that outputs characters to each other and usually makes the characters too thick ...

I played with the font-smooth property and a few other things, but couldn't get it to work ...

I don't think this is too relevant, but the CSS for these buttons ...

 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; 

Background is a separate element.

How can I get white text, like black text?

^{(It may be difficult to tell the difference between the two, but my boss insists that he is.)}

Answer 1

This worked for me:

 -webkit-font-smoothing: antialiased; 

Answer 2

Part of the problem is that it is not a particularly well-designed font. I agree with the @thirtydot suggestion of a text shadow. 1px black and black text shadow should reduce the font. Any browser that does not support text-shadow will render the font anyway.

Answer 3

And remember that some html elements are highlighted in bold by default, for example h1, h2 ... When I use the squirrel font to create a font and use it with h1, for example, I always set:

 font-weight: normal;