Like many, Chrome is my browser of choice, but the past couple of updates have resulted in some problems specifically with Google web font rendering (as well as some other web font rendering).
I had considered linking to a number of different issues that I had seen in bug trackers, but you can see just how popular this particular issue has gotten by performing a quick Google search.
To be honest, I’m not sure if this is relegated only to Chrome or to all WebKit-based browsers.
Anyway, since Chrome normally does silent version updates in the background, this should be fixed in an upcoming version – last I checked, it was resolved in the latest build of Chromium – but until then, I thought it may be worth sharing one way to fix the issue.
Google Web Font Rendering (A Temporary Fix)
Normally, I wouldn’t dedicate an entire blog post to something like this; however, it hits close to home namely because this site has been impacted by the bug.
display:none; to the entire
body element, then removes the property right after it has been set ultimately forcing the browser to repaint the page.
I know – it’s a hack, it’s ugly, it may cause flickering depending on how fast your connection is, and it’s basically anything but elegant.
But it gets the job done, it does so consistently, it’s temporary, and it’s the only resolution that I’ve found that works 100% of the time, so when weighed against all other options, this is the lesser of all evils, so to speak.
Of course, if there are other fixes, I am all ears, but until then, feel free to borrow this gist and use it in any of the projects that you have being affected by this bug.