Question

I am using Google fonts and I have code inside $(window).load(function(){… with some text saying “loading…” everything is being rendered on the page before executing the code inside $(window).load(function(){ except the text which have CSS property font to use a Google Font.

How can I overcome this?

Answer 1

You can make a non-asynchronous (a synchronous?) AJAX call to make sure the fonts are downloaded:

xmlhttp.open('GET','path/to/needed/font',false);

That will do what you are asking for. But, honestly, this is not the best user experience. I would instead recommend making a tiny SVG image of the “Loading” text and just show that image. SVG is nice because you can include the code in your HTML so you know it’s downloaded.

If you can’t use SVGs, or just prefer JPG or PNG for whatever reason, you can embed the image data into the page: Embedding Base64 Images.

Finally, if you don’t care about Internet Explorer, and you really don’t want to use an image, then I guess you could just put the data url into the @font-face src. For example: http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/