Google Fonts Flash in Internet Explorer

Question

I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?

I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).

Any suggestions on this?

www.n-styleid.com

Answer 1

Everything is working as it should (In the worst sense of the words) This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.

There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.

Hope that helps.

Answer 2

A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.