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.

Note: This has been discussed here: http://stackoverflow.com/q/11487427/1114320 and it's interesting to know that this only seem to happen on Google Webfonts in the Google Browser. Weird... — Sliq, Jul 25 '13 at 21:26
I made a blog post incl. fixes: [How to fix the ugly font rendering in Google Chrome](http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/) — Sliq, Aug 30 '13 at 15:28

sboisse · Accepted Answer · 2014-07-28T19:23:44.010

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.

It should be accepted answer as it really solves the problem without any compromise. — Adam Pietrasiak, Apr 14 '14 at 11:34
This answer will no longer be the best answer soon. Chrome 37 fixes the problem so there will be no need to use svg fonts any longer. — sboisse, Jul 17 '14 at 09:13

score 33 · Answer 2 · edited May 23 '17 at 12:02

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jul 25 '13 at 20:21

Sliq

15,937
27
110
143

1

I've added such and it doesn't make much of a difference. :\ – Jire Jul 25 '13 at 21:26
1

@Jire: 1px is just an example value, maybe you need to use another px amount (according to the height of your font size). Or try one of the other fixes (i just updated my answer). – Sliq Jul 25 '13 at 21:27
2

This might work well for some but in my case the result was horrible. – Mikael Nov 26 '13 at 16:02
`-webkit-text-stroke: 1px` looks like a glitch (at least in chrome 33) and `text-shadow: #333 0px 0px 1px; // for black text` only works with really big font size or else it just looks blurred – Patrick Mar 02 '14 at 13:01
@for3st Please look at http://stackoverflow.com/questions/11487427/is-there-any-font-smoothing-in-google-chrome?lq=1 – Sliq Mar 02 '14 at 13:16

score 19 · Answer 3 · answered Jul 23 '15 at 00:19

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.

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

FYI this solution is a solution that the end-user might do on his/her computer. The other solutions are for web developers who build websites, so that ALL visitors can see well-antialiased text. — Sliq, Feb 07 '17 at 13:24

score 3 · Answer 4 · answered Jul 17 '14 at 09:11

3

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.

answered Jul 17 '14 at 09:11

sboisse

4,860
3
37
48

score 1 · Answer 5 · answered Feb 22 '16 at 16:57

1

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;
}

answered Feb 22 '16 at 16:57

Deandré Thomas

33
8

score 1 · Answer 6 · answered Apr 28 '17 at 01:27

1

Just set Font weight to Normal. This seems to solve the issue in Chrome.

so my CSS that works for me is:

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

answered Apr 28 '17 at 01:27

David Vaassen

11
1

score 0 · Answer 7 · answered Mar 14 '16 at 17:08

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

Chrome not antialiasing text

7 Answers7

text-stroke-fix:

text-shadow-trick:

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

Linked