Question

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: 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;

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

Answer 1

This worked for me:

-webkit-font-smoothing: antialiased;