Disappearing icon font in Chrome

Just ran across a weird little bug while updating a client WordPress site.

On this particular site, I’m using an icon font in the header for social media icons, and in Chrome on my Mac (it may have been on Windows too, but I didn’t test it) when the page loaded, the icons would not appear. To make it even harder to troubleshoot, as soon as I interacted with the page in anyway (open developer tools, hovered over the icon, scrolled, etc), they would suddenly appear. It seemed that either the font wasn’t loading or some Javascript or CSS was getting hung up on something.

Finally after some digging, I came across a Typekit blog post talking about this very issue on Chrome v33. Some further digging in Chromium, I found a temporary solution by using JQuery to slightly manipulate the body after a slight delay. The follow code worked great for me. Here’s the code:

$('body')
  .delay(500)
  .queue( 
    function(next){ 
        $(this).css('padding-right', '1px'); 
    }
  );

So, what do you think ?