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: 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.)
This worked for me: