Font-face flickering when new css files are dynamically loaded

Question

I am using the Google Webfont Loader to get my webfonts loaded with a callback and it is working fine.

Although, when a couple of components: Google +1 button, Twitter Search Widget and the Add This button is loaded, they add a new stylesheet to the DOM and makes the browser render the site again. This is causing the font-face to disappear and then show for each new stylesheet added to the dom.

I could hide the font entirely until the components are loaded but they tend to be pretty slow so that would leave me with a pretty bad user experience. About 1 sec of a headline-less site.

Andy tips on how to force font-face to not redraw or how to block dynamically loaded CSS from within Google, Twitter and FBs embed scripts?

Update: Demo here http://kristoferforsell.com/dev/fontexample/

Answer 1

This is currently an inherent issue with browsers and the @font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet. Of course, using the standard "safe" fonts will also remove the blink.

Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.

An online converter to get base64 code can be found here

Usage for @font-face would be like so.....

 @font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[   the base64 code here   ]");
}