Cloud Four Blog

Technical notes, War stories and anecdotes

Invisible Webfont Issues in Chrome (and a fix)

A few weeks back, we started hearing from Chrome users about a rather bizarre problem. They’d visit our site, only to find that the text was completely invisible:

Screenshot of blog.cloudfour.com with webfont issue

(Poor Jason, all alone, no content to keep him company…)

It turns out that Chrome 32 and 33 have some bugs when it comes to webfonts. Typekit wrote about the problem in a February post and again in a March update.

We’re sure the Google folks will fix the issue in a future update, but in the meantime it’s a significant obstacle for our users. So we rigged up a temporary hack based on a solution offered in Chrome’s issue tracker that seems to remedy things:

Our hack uses browser detection (yuck) to avoid unnecessary repaints, but if that turns your stomach there’s also a CSS-only solution. Let’s hope either measure is an extremely temporary one!

2 Comments on “Invisible Webfont Issues in Chrome (and a fix)”

  1. Thank you SO much for sharing this! I was working on my own website the other day and found that I am having this same issue. You just saved me a ton of time trying to figure out what’s wrong / how to fix it.

  2. Phil S says:

    Thanks for this – been trawling the web for a while trying to figure out what the problem was. You’ve saved me a heap of head banging! :)