Repository navigation
Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170
Description
Activity
- added this to the milestone
on Aug 28, 2017 Thanks for suggesting this; however we want to keep the directory looking like this, to show the fonts off at their best :)
Reacted by Andy Leong, Denny Louis, Yatfung Yeung, Gushchin, MadShura, Colm, Sukka, Patrick Plaggenborg, Reynaldo Aguilar, Marcel Schulz and 2 moreReacted by Georgi Boiko, jeremy king, Piotr Pałka, Veller, Oleksandr Fesenko, Iinguistics, Adolfo Jayme-Barrientos, Tobias Høegh, Myndex, Jaclyn Tan and 39 moreJust 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.
Reacted by Adolfo Jayme-Barrientos, Krzysztof Zielinski, Veronica Watt, Aleks Hudochenkov, Storm-Julian Tersteeg, Scott Kellum, Stillward, Cariad Eccleston, Matt Painter, Yan Minari and 7 moreReacted by Martin Kolarov, Luis Hdez, Tom Gooden, Jason Hibbs, Sebastian, gabrielboeker, Colby Newman, Denny Louis and Colm- Reacted by Sam Beevors, samme, Angius, Veronica Watt, Max Sysoev, eknowles, jeremy king, Jacob, Max Sh, Scott Kellum and 18 moreReacted by Martin Kolarov, Kyle, Stephen, Jason Hibbs, Emiliano, Danny van Holten, Case Khor, Nantris, Joshua Söhn and Patrick PlaggenborgReacted by Case Khor
@tanc Since you only need this for your own previewing purposes, why not just create a userscript that will override the
-webkit-font-smoothingCSS 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).
Reacted by Adolfo Jayme-Barrientos, C D, Veronica Watt, Martin Kolarov, Aleks Hudochenkov, Luna Razzaghipour, Andreas Möller, robrecord, Sylwester Zarębski, Florian Wendelborn and 12 moreReacted by Landon Looper and Patrick PlaggenborgWhy not just fix chrome?
Reacted by Veronica Watt, Stewart, Wojciech Maj, 12, Alex Price, Giulio Zanchetta, Pedro Fernandes, Georgi Boiko, Alex vG, Piotr Pałka and 32 moreReacted by Giulio Zanchetta, Andrei Lupu, Will, Jaclyn Tan, Alistair Smith, jrobin, Caleb Maclennan, Matthew Thomson, Zach Willard, M. Danne Febrian and 7 more@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.txtIf 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-fixThanks for suggesting this; however we want to keep the directory looking like this, to show the fonts off at their best :)
I realize this is a closed topic, but "-webkit-font-smoothing: antialiased;" and other font smoothing properties do NOT show fonts off at their best. What does show fonts at their best is the DEFAULT for the given device, and this is nearly always subpixel antialiasing. The font-smoothing "antialiasing" property is inferior to the default subpixel antialiasing both in quality and by reducing contrast needlessly.
Using "-webkit-font-smoothing: antialiased;" is not a feature, it's a bug, and font smooth is a CSS property that should be depreciated. Best results are to use the device's default antialias which is optimized for that device. That provides the best and most consistent results.
See also: http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
Thank you,
Andrew Somers
Myndex Color Science Researcher
W3C WAI/WCAG Invited ExpertReacted by Caleb Maclennan, Thomas Linard, Adolfo Jayme-Barrientos, Tanc, Arne Ekberg, awardx, isius, Yarin Kessler, M. Danne Febrian, 56k-modem and 9 moreReacted by Landon Looper@Myndex wouldn't you agree that what looks best is at least somewhat subjective?
If
-webkit-font-smoothing: antialiasedis used on Apple.com, it looks more similar to photoshop's font rendering algorithm than Chrome's default, and developers and users alike seem to prefer it, then maybe it's worth considering if the default algorithm is really as good as some claim it is.Reacted by Rory BourdonReacted by Tanc, Adolfo Jayme-Barrientos, M. Danne Febrian, Alex, Márcio Duarte, ellie 🌸, Artem Sapegin and ovarr-sc10 remaining items
@chrisdone It’s not necessary to announce it
Reacted by Lucas Veiga, Alex Thompson, M. Danne Febrian, Joshua Van Deren, marekwee, Valentin Hervieu, Matteo Pieroni, João Martinho, John D. Jameson, Artem Sapegin and 2 moreHi @alinacsava @thlinard @tanc
Indeed perhaps this is not the thread to discuss... looking at the age, I'm wondering how it happened to pop up to me, but the use of -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale is a real and persistent problem across the net.
The problem really rears it ugly head when used in combination with thin fonts. This experiment from last year: https://www.myndex.com/WEB/WCAG_CE14antialias has test panels all with antialias on. Going into the inspector and then toggling it on and off you can see the substantial difference in contrast.
Reacted by Adolfo Jayme-Barrientos and CosmoI'll ask the team to revisit this
I've investigated this further — it appears that -webkit-font-smoothing: antialiased; is only applied to the word "Fonts" next to the Google logo on the google fonts pages, and not to the font samples.
Sorry if any of my earlier comments created a mountain from a molehill... I suppose I should look at dates more
Reacted by CosmoReacted by CosmoReacted by CosmoYes it doesn't look like those css rules are applied any more, so I don't think we need to be asking for anything. Maybe the google fonts team can drop a note in here to confirm the rules are no longer applied and close the issue if that is the case?
Reacted by CosmoI've investigated this further — it appears that -webkit-font-smoothing: antialiased; is only applied to the word "Fonts" next to the Google logo on the google fonts pages, and not to the font samples.
Yup, that is the css snippet I quoted in my previous reply
Reacted by CosmoVery happy to close this, thanks everyone for the discussion and thanks to the Google team for removing the lines of CSS.
Reacted by CosmoReacted by CosmoReacted by Cosmohttp://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
You all know that the site where this article was written has -webkit-font-smoothing: antialiased in it's html tag right?
Reacted by Arne Ekberg, Case Khor, M. Danne Febrian, Sukka and Patrick PlaggenborgReacted by Yao Zhao, Veronica Watt, Allan White, Dave Crossland, Alex Thompson, Rory Bourdon, Mikael Korpela, M. Danne Febrian, James Prado, Andrey Holodnyak and 10 more- added 2 commits that reference this issue
on May 29, 2024 - added a commit that references this issue
on Jun 8, 2024
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?