Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tanc opened this issue Aug 28, 2017 · 6 comments

Comments

@tanc
Copy link

commented Aug 28, 2017

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

This comment has been minimized.

Copy link
Member

commented Sep 21, 2017

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

@chrisdone

This comment has been minimized.

Copy link

commented Mar 27, 2018

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

image

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

This comment has been minimized.

Copy link
Contributor

commented Apr 28, 2018

@willcodeforfood

This comment has been minimized.

Copy link

commented Sep 6, 2018

@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

This comment has been minimized.

Copy link

commented Feb 16, 2019

Why not just fix chrome?

@nivicentiu

This comment has been minimized.

Copy link

commented Apr 5, 2019

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.