Chrome not antialiasing text

Question

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:

Firefox:

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

Answer 1

NOTE: Chrome 37 and later fixed font antialiasing, so this fix is no longer needed in the latest version fo Chrome.

---

I think the best solution is to convert your font to svg as chrome does render fonts with antialiasing if the font file format is svg.

You can get more info here in the article where I found the answer myself: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

So basically you must convert your font to svg format (using a font converter like font squirrel provides) and set media queries in your css so that the svg file format is specified first in your font declaration for chrome, but not for the other browsers.

/* This is the default font face used for all browsers. */
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

And voilà. The font works in Chrome with antialiasing.

Answer 2

I've searched for a solution to this exact problem for a few hours, and finally I've found something that works for me, so I want to share it with you.

Go to chrome://flags/#enable-direct-write If DirectWrite is disable, enable it; If DirectWrite is enable, just disable it;

In my case I've enabled it and it worked just fine.

Cheers

Answer 3

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.

Answer 4

According to this blog: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

It will be fixed in Chrome 37. And he is right. I tried it in Chrome Canary and it works.

Answer 5

Chrome does not support anti aliased if it is not a svg you should use text shadow in stead.

.selector{
  text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

Answer 6

This is an issue with windows 7/8, not with Chrome. Chrome used to always render bad. But they fixed that with build 37. However it still accepts windows font rendering preferences. So if you're like me and turn off all the fancy appearance settings in windows then you will need to make one tweak to get chrome to render properly again.

To fix this issue you have to set up Clear type fonts in windows and enable font smoothing in performance options.

1. • go to start menu.

   • search for "Adjust ClearType Text".

   • enable ClearType and go through the wizard to choose your settings. (very easy) this sets up the text-renderer for the next step. (if you dont set up ClearType the next step will still work but ClearType looks even better.)

2. • go to start menu

   • search for "Adjust the appearance and performance of windows"

   • this opens "performance Options" screen.

   • go to first tab "Visual Effects"

   • if you select "Let windows choose" or "best appearance" then it is fine. However if you choose best performance it disables anti-aliasing system wide. Most browsers (including Internet Explorer) ignore this setting. Chrome does not.

   • to turn it back on, but leave all other performance options select "custom".

   • near the bottom of the list hit the checkbox next to "Smooth edges of screen fonts"

   • hit apply

Now close and reopen chrome. You will have much better looking text.