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

I have some buttons my page using a custom font face using the CSS and files generated by the Font Squirrel generator.

When the font's colour is black, they display fine...

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

I've played around with font-smooth property and a few other things, but have been unable to get it to work...

I don't think it's too relevant but the CSS for these buttons are...

color: #FFFFFF;  
display: block;
padding: 1e开发者_JS百科m 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;

The background is a separate element.

How can I get the white text to appear like the black text?

^{(It may be hard to tell the difference between the two, but my boss insists it is there.)}

This worked for me:

-webkit-font-smoothing: antialiased;

Part of the problem is that it's not a particularly well-made font. I concur with @thirtydot's suggestion of text-shadow. A 1px black-on-black text-shadow should thin the font out. Any browser that doesn't support text-shadow will be rendering the font horribly anyway.

And remember that some html elements has bold as default, like h1, h2... When I use font squirrel to generate a font and use it with h1, for example, I always put:

font-weight: normal;