-webkit-font-smoothing property has no effect in Chrome

Question

I'm trying to control Google Chrome's (horrible) font anti-aliasing using the -webkit-font-smoothing CSS property, but it's having absolutely no effect on the text.

<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>

I've compared the pixels in Photoshop and all three are exactly the same. Is Chrome not supporting this property anymore?

I guess I'll have to let Chrome users on Windows see horrible pixelated text. I figured by 2013 we'd at least be past inconsistent font rendering issues. — Gavin, Sep 13 '13 at 13:29
Actually Chrome has had font rendering issues for long time, regardless of font smoothing. Check out my [answer here](http://superuser.com/a/492784/167683) for details. But a fix is coming soon it looks like, finally! — Trevor, Feb 06 '14 at 02:43
Just wanted to stop by and say thanks for ruining Chrome font rendering on Windows and Linux when this property is used. OSX kludges do not belong on other operating systems, but Apple fanatics got them in. — pandasauce, Apr 11 '19 at 11:21

score 16 · Accepted Answer · edited Sep 13 '13 at 13:02

16

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/0vqp1bnkaoE

-webkit-font-smoothing no longer works. Google Chrome team intentionally changed this behavior. Seems font-smoothing wasn't applied "properly" on OSX in previous versions.

edited Sep 13 '13 at 13:02

Prisoner

27,391
11
73
102

answered Sep 13 '13 at 12:59

BenM

4,218
2
31
58

26

Great. They took away the one thing that could make fonts look halfway decent in Chrome. Why even enter the browser arena if you can't render a font. – Gavin Sep 13 '13 at 13:18
Wait, does this mean that -webkit-font-smoothing: antialiased; is gone and subpixel is the standard? Thank God, Jesus, Zeus, or whomever made this possible. Or Google. – jocap Mar 03 '14 at 09:00
The problem is that the Mac's subpixel antialiasing results in light fonts on dark backgrounds being way, way too bold. Turning off subpixel antialiasing was the only way to fix it. Now you can't in Chrome. – 75th Trombone Oct 08 '14 at 21:15
Using chrome 43 on OS X, it doesn't seem to support subpixel antialiasing at all any more. Firefox renders fonts nicely using subpixel antialiasing, which I prefer over grayscale antialiasing. – Thor Jul 14 '15 at 04:53
2

This is mostly not correct and that link is not a good example of the full discussion. The Google Chrome team decided to put the font-smoothing property back into chrome in the following release since they didn't come up with a better solution to rectify the original issue and didn't want to create further confusion. If you search for the issues tracker for Chromium, you can find a discussion that describes it in further detail. – Mike Kormendy Sep 06 '16 at 20:18

Jayesh Amin · Answer 2 · 2013-09-13T13:19:20.810

0

Well you are right. Font-smoothing is not supported now. It is not in new css standards. So, No more font-smoothing.! YOu may wanna see w3c standards here. http://www.w3.org/TR/WD-font/#font-smooth

edited Sep 13 '13 at 13:19

answered Sep 13 '13 at 13:10

Jayesh Amin

314
2
12

score 0 · Answer 3 · edited Dec 07 '13 at 23:53

0

If you are using a browser or OS that does not have font rendering than this will not work, have you tried -moz- -o-, Chrome works on -webkit- it has to be your browser.

edited Dec 07 '13 at 23:53

Tomasz Frankowski

100
9

answered Sep 13 '13 at 13:16

electrikmilk

1,013
1
11
23

score 0 · Answer 4 · answered Feb 12 '14 at 23:47

0

It seems that for some (system?) fonts, there is a difference between your test cases:

body {
   font-family: "HelveticaNeue-Light";
   font-weight: 300;
}

http://jsfiddle.net/gN875/

answered Feb 12 '14 at 23:47

tinynow

23
1
7

score 0 · Answer 5 · edited Jun 29 '15 at 15:38

0

Try this CSS:

div {
  -webkit-text-stroke: 0.6px;
}

<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>

edited Jun 29 '15 at 15:38

Ruslan López

4,433
2
26
37

answered Nov 12 '14 at 01:51

Gener Cruz

27
1

2

All this does is bump up the stroke width. Doesn't solve the problem at all – Daniel Bonnell Apr 03 '17 at 20:09
This is more useful than it seems. Some fonts might just need to be a little bit "bolder", and may or may not make them look better. – xdevs23 Mar 04 '18 at 21:07
This is actually great advice and a good workaround for the original problem. Much more useful than the accepted answer, which just states that this is not supported anymore, repeating the op. – djk Apr 18 '23 at 09:26

score 0 · Answer 6 · answered Feb 27 '18 at 20:00

You can try syntax:

/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

Though present in early (2002) drafts of CSS3 Fonts, font-smooth was removed and this specification is not on the standards track. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

-webkit-font-smoothing property has no effect in Chrome

6 Answers6

Linked

Related