Fix poor font-rendering in Chrome on Windows
For some odd reason, font-rendering in Chrome on Windows is slightly poorer than font-rendering in Firefox or IE on Windows 7 by default. I tried fixing the issue with several different CSS properties to no avail. Low and behold, it was a system/browser issue for me.
Here is how I fixed it:
Enabled ClearType with the default settings. Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.
Enable "Disable accelerated 2D Canvas" in Chrome. This seems very counterintuitive, but if your graphics card does not have this capability, then vector objects in Chrome render poorly.
Some have indicated that upgrading the drivers for your video card have also resolved the issue, but this seemed to be the only thing that worked for me.
Written by Mike King
Related protips
13 Responses
"Accelerated 2D canvas" is in chrome://flags/
Helped me a lot! Thank you!
YES! this one solved it - Disable accelerated 2D Canvas.
my eyes thank you
Thank you, this is great! I forgot about the chrome://flags , thanks for adding that #Herzfinsternis
I've been trying to fix this issue on my Windows 7 rig for months. Messing with the ClearType settings appears to work, but the first time you restart your computer after that, it reverts to the poorly rendered fonts. There doesn't seem to be any intuitive way to make the ClearType settings sticky :-\
However... disabling 'Accelerated 2D canvas' in the chrome://flags finally did the trick. This makes total sense, because it's my PC at work that exhibits the problem, and it of course has a bottom feeder of a graphics card. My gaming rig at home, OTOH, has a top-of-the-line NVidia card and doesn't have this problem.
You're a star, Mike.
I used this tip last week. worked great. this week I had the same problem with fonts in chrome. changed the setting back. Problem fixed. maybe it's my PC.
Excellent - not using hardware acceleration fixed it perfectly
This was so helpful: Disable accelerated 2D Canvas.
Thanks a ton!!
ACCELERATED 2D CANVAS worked!! Thank you very much. For some reason I disabled then enabled again and the text got fixed.
Thank you all for the tips. It's really nice that we help each other.
disabling the 2d canvas worked. thanks!
Fook me, I've been tinkering with this pc so much the past two weeks, trying to figure out how to not murder my eyes while working. I don't have this issue on my Macbook, and it was driving me insane trying to find "font smoothing" in the settings. Thanks so much @Herzfinsternis for the heads up where to find the Accelerated 2D canvas setting!
To further increase the readability of texts, I'm using a free extension named "Chrome Font Super Enhancer". It works very well!
I had the same issue in a Firefox-based browser, and disabling hardware acceleration was the very welcome solution there too. These are the steps:
- Open Options or type "about:preferences" in the address bar
- Scroll down to the Performance section and uncheck "recommended performance settings" to open up more options.
- Uncheck the "Use hardware acceleration when available".
- Restart your browser.
Have a fresh tip? Share with Coderwall community!
