pixilated fonts in chrome

As developers make websites, we come across a lot of funky things on the web and how browsers display websites.  Most are Internet Explorer issues, but once and a while we find a bug with Chrome or Firefox.  Recently, a bug in Chrome on Windows came to our attention that makes most fonts look pixelated and distorted. Here’s a picture words in both Chrome and Firefox.

As you can see, the font in Chrome is pixelated, has jagged edges, and just looks weird.  But in Firefox, the edges are smooth, and the font looks how it should look. Compared to Chrome, it may look a little on the fuzzy side, but that is simply how font edges become smooth.

The Google development team has apparently been aware of the issue for years, and have just recently notified users that they are getting closer to a fix. Hopefully this will be soon, but until then there are a few things website developers can do to try to fix the issue. I emphasize “try” because some of these remedies don’t always work, but they’re worth a shot.

Use CSS:

  • -webkit-text-stroke: 1px;
    or
    -webkit-text-stroke: 1px white;
    The 1px may need to be adjusted depending on the font and size.  Colors can also be added to help.
  • -webkit-font-smoothing: antialiased;
    or
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    This was a solution other developers have been suggesting.  However, I haven’t been able to duplicate the results.

Use SVG fonts. Some web developers have used SVG fonts on their websites to fix this issue, but this isn’t a widely accepted workaround.  SVG fonts really should be used for the majority of text on a site, and are quite buggy themselves.  But if the fonts are really bugging you on your site, you might want to give this a try.

Hopefully one of these methods works for you.  If you have any comments or other suggestions on how to fix this issue, please comment below.

See also Chrome Bug: Text Not Loading