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

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    How to make a smooth transition for css controlled by jQuery?

    How to inspect precompiled minified SASS code

    How do I trigger the popup dialog box automatically from iWebkit?

    How to include child div into parent div automatically?

    How to remove the double border bottom line below the breadcrumb

    How to keep images fixed but also responsive so they don't overlap

    How can I archive this responsive design?

    How do I post a jsfiddle example of some trouble I'm seeing in Rails?

    How to change CSS pseudo-class element using JavaScript

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    html css - how to create multiple column list?

    How to animate an “:after” using CSS or jQuery

    Dompdf - how to display table and graph sidebyside?

    how to creating a separator line which is always in the middle (center)

    How to use a CSS :first-letter pseudo-element in a
    paragraph

    How to hide the rest of the contents using simple CSS and Javascript

    How to position text over an image in css

    Showing the child category when Clicking the parent category

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    How do I add a div under a right floated div?

    How to override a style of a specific Joomla module?

    How to fix a glitchy header collapsing to nav bar

    How to remove the margin at the top of my page

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    How can I use JQuery toggle for multile DIVs?

    How do I change the css so lowering one class does not lower the other?

    How do I keep parentheses of SASS / SCSS mixin?

    How can I use a link to navigate between input boxes?

    jQuery how to rapidly change color on divs with click