Alex Rivera | Logout

Chrome not antialiasing text

Asked 2013-07-25T19:55:40.233
34

Google Chrome is not antialiasing my text even though I added code specific for Google Chrome to do so.

On a weird note, Firefox, which was said to be incompatible with the code I had added does antialias the text appropriately.

Here's the specific CSS styling:

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

Chrome:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

Firefox:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

As you can see above (and probably on the website) the font is much better looking on Firefox.

html css google-chrome firefox
Edit
Report

1 Answer

33

I've written a big answer on that issue here: Is there any “font smoothing” in Google Chrome?. The post contains everything you need to know and how to fix this. And this is an official bug in Google Chrome, the developers of the browser already know about it and are working on a fix.

In short, you can add this to your text rule to make the fonts look much better:

text-stroke-fix:

-webkit-text-stroke: 1px

or

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

text-shadow-trick:

 text-shadow: #fff 0px 1px 1px;

or

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (in combination with the above):

-webkit-font-smoothing: antialiased;

Note: These are workarounds, not a real fix of the basic problem.

answered 2013-07-25T20:21:38.393

Your Answer