Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com

[tanc]

The css rule -webkit-font-smoothing: antialiased; has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. I believe this was probably introduced to get around inconsistencies in rendering between browsers, particular between Chrome and Safari on MacOS.

I understand that Chrome, since around version 50, has upgraded the rendering engine to support sub pixel rendering. The default rendering of fonts across browsers now looks almost the same (Firefox also got the upgrade).

When previewing fonts on fonts.google.com they are being rendering in a non-default way that makes them look different from when they are rendered on a different site that does not apply -webkit-font-smoothing: antialiased;

Can you please consider removing this css rule and let the browsers choose how to render the fonts so we can have more accurate previews of what they will look like when we use them?

[davelab6]

Thanks for suggesting this; however we want to keep the directory looking like this, to show the fonts off at their best :)

[chrisdone]

Just FYI, the fonts are more jagged due to this setting. Here is a close-up comparison of the antialiasing:

The bottom bit is with this CSS property turned off. You can see it's smoother (ever so slightly thicker; just the right amount), and looks way better on a Retina screen. I'm surprised anybody would use this property as it makes my eyes hurt reading text at a normal paragraph font size. I'm currently researching ways to turn it off.

[fitojb]

http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[EricSeastrand]

@tanc Since you only need this for your own previewing purposes, why not just create a userscript that will override the -webkit-font-smoothing CSS property on those Google Font pages when you view them?

While I agree with you that font antialiasing is an antipattern, and that subpixel rendering is better in [almost] every way, I understand the motivation behind this: mobile devices can't support sub-pixel rendering because their screens must work in multiple orientations. Using antialiasing across the board ensures consistency (even if the results are less than ideal on computer screens).

[sbussard]

Why not just fix chrome?

[vicentiu2]

@willcodeforfood, I've never worked with userscripts, but I'm willing to learn to create one to disable font smoothing everywhere since it tires my eyes significantly. I installed Tapermonkey, read some documentation and tried a couple of scripts (attached), but nothing changed.
If you can provide some pointers about what I'm doing incorrectly, I would appreciate it.
I even tried downloading some pages and modified the -webkit-font-smoothing in the css to none, but still the fonts were smoothed.
thanks
script1.txt
script2.txt

[RiZKiT]

If someone still needs to fix this, use a browser plugin like stylish or stylus, there you can adjust webpage styles, without using a script plugin. Then import this style for example:
https://userstyles.org/styles/111304/chrome-font-fix