Fixing Jagged Google Fonts in Chrome

——  Posted on September 28, 2013  ——

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.

View Demo

  • antoniofrignani

    Have you tried adding a slight text rotation (like 0.0000000000001)? Doing so, triggers the element to be displayed as 3D, adding antialiasing and then smoothing the edges of the characters

    • admin

      Thanks for the tip!

  • lerouxb

    The problem I have with these techniques is that they aren’t just limited to Chrome on PC, but will affect Chrome on the Mac too, making fonts quite a bit thicker and often fuzzier.

    If only there was a quick and easy way to target only Windows PCs from CSS. I can only think of JavaScript based hacks.