15 Mar Google Web Font Rendering Incorrectly in Chrome? Here’s The Fix

Here’s How We Fixed Chrome Rendering a Google Web Font Incorrectly.

Among other things, we design attorney websites here at OneDemand’s Orange County, CA offices. And, like pretty much any vertical, today’s attorney websites have to not only be professional and good-looking, they also need to be responsive, mobile-friendly, and cross-browser compliant. During a recent attorney web design project, we came across an interesting issue when doing our cross-browser testing – an integral part of our legal web development process.

The issue? Well, a Google Web Font we were using in the attorney website design (Open Sans Condensed) was rendering completely different – and completely wrong – in Google’s own Chrome browser. In Internet Explorer, Edge, Firefox, and Safari the font was rendering as designed, but in Chrome the font was squished together, smaller, and almost unreadable. This was an obvious problem.

We first verified the issue was only impacting our developer’s workstation, which lowered our blood pressure because the issue was clearly local to that specific computer. Because we still wanted to know why this was happening, we then combed through Chrome’s settings, figuring there was a zoom setting or some character setting that was causing the incorrect rendering of the Google Web Font. No joy.

The Fix: Uninstall The Local Version of the Affected Google Web Font

Then, the lightbulb came on. We had recently downloaded and installed that very same Google Web Font (Open Sans Condensed) on the developer’s workstation, so we could prepare mockups, social media cover images to match the website, etc. in Adobe Photoshop. So, we uninstalled the local version of the Google Web Font – and, voila! Google Chrome was now rendering the Google Web Font correctly.

[RELATED: 5 Attorney Web Design Tools In Our (Non-WordPress) Toolbox]

For reasons that bemuse us, apparently Google Chrome does not use Google’s own Web Font API hook, even when the HTML code is telling it to do so – it will first check for a locally installed copy of the font, and use that instead. For yet more reasons that bemuse us, we have no idea why the locally installed copy of a Google Web Font would render differently (and wrongly) in Google Chrome, when it otherwise renders fine in local applications like Adobe Photoshop. And, the irony that this issue only impacts Google’s own web browser – and not its competitors – is as delicious as bacon on a Sunday morning.

So, if you’re wondering why your Google Web Font is rendering incorrectly in Chrome, take it from an attorney website designer operating out of Orange County, CA: Try uninstalling the local copy of the affected Google Web Font.

(If our fix fails, it turns out there’s a second possible cause here: Having a mismatch in the HTTP/HTTPS protocol when hooking into Google Web Fonts. A good discussion can be found here.)

—

OneDemand builds professional, responsive, and mobile-friendly attorney websites for law firms nationwide out of its Orange County, CA offices. We help law firms look good online across the full range of practice areas, on both the plaintiff and defense side of the bench. And, as part of our unique “for attorneys, by attorneys” mantra, all of our legal web development services include the copywriting assistance of a partner-level attorney. Feel free to enter your email address in the bar below to find out our attorney web design features and pricing, or get in touch for more details.

Best,
Scott J. Jackson, Esq.

@soclsurfer
www.linkedin.com/in/sjjdev