Fixing Google Fonts’ Rendering Issues in Chrome

by Jason Unger, Founder

Insights / Website Design / Fixing Google Fonts’ Rendering Issues in Chrome

Now that Forrest has told you how much we love using Google Fonts on all of our projects, I do have one gripe to share.

And in the grand scheme of things, it isn’t the biggest problem – but it certainly can be a nuisance.

You see, for some reason, Google Fonts don’t always render correctly in Chrome. Yes, you read that right – the browser that Google makes, Chrome, doesn’t always display Google Fonts as they should.

Bizarre, right?

(This is usually a PC-only issue; the Mac version of Chrome displays Google Fonts correctly.)

Here’s the Issue. And Then How to Fix It.

What happens is letters tend to get cut off on the first load of the page. The full letter often will display when you refresh the page (or when you head to a second page on the site), but when first visiting the site, things can definitely look out of whack.

According to the Chrome development team, this issue should be fixed in a release of Chrome scheduled for July, but in the meantime, here’s how you can fix it.

The simplest way to ensure the font renders correctly in Chrome on a PC is to download it from Google Fonts, convert it to a Webfont, and host it yourself.

It’s a three-step process.

1. When you find the Google Font you want, click the download button to download the font to your local machine.
2. Use Font Squirrel’s Webfont Generator to create a @font-face kit.
3. Upload the font files to your site and call it via your stylesheet.

It works great. You get the font you want, and don’t have to worry about cross-browser compatibility.

Probably the more frustrating thing is that font rendering has been an issue for Chrome for a few years now — so it’s not a new problem. I’m not holding my breath that this July update promised by the Chrome team will fix the issue, but I sure hope it does.

Featured image via Patrick Shampine.