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


Tags: css,custom-font

Problem :

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

Black on green

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

White on black

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



Solution :

This worked for me:

-webkit-font-smoothing: antialiased;

    CSS Howto..

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    How to select the table heading of the first row in table using css selectors?

    CSS floats - how do I keep them on one line?

    How to set CSS position properties to none ?

    How to resize a chosen jquery dropdownlist on windows resize

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to apply CSS properties of one class in another

    How to use div to emulate border for