Fixing Jagged Google Fonts in Chrome
Where have all the Jaggies gone?
Supposedly, Google has fixed the issue with poor drawing of Google Web Fonts. Unfortunately, I’m not finding that to be the case on the PC version of Chrome & Safari. As the font gets bigger, the issue seems to go away, but there are quite a few sizes where the fonts aren’t rendering smoothly. Here are a couple quick fixes for the select few that are still having problems with anti-aliasing in Google Fonts.
1. Add a slight text stroke.
One option is to give the text a .15px stroke in the same color of the main text.
body {
-webkit-text-stroke: .15px;
}
2. 1px shadow method.
Another option is to give the text a 1px shadow set at a low opacity.
body {
text-shadow: 0 0 1px rgba(0,0,0,0.3);
}
Both options produce similar results. I had issues getting -webkit-text-shadow working in Chrome, so the -webkit-text-stroke option might be a better option for that reason alone. For something as global as a font stroke, it’s nice to be able to target the specific browser. If you have a PC and want to see the different rendering options, check out the demo below in Chrome or Safari.
