Font not loaded until its referenced within HTML

[ozRocker]

I'm using a custom font for my scene so I have some code like this:

scene.textureContent.font = "44pt GillSansMTProExtraBold";

The problem is if I'm not referencing that font via HTML then its not loaded and it defaults to Times New Roman.  To get around this I created a hidden div with some text in it

<div style="position:absolute; top:-200px; left:-200px; font: 22pt GillSansMTProExtraBold">hidden</div>

I'm just wondering if there's a better way of doing this.  Is there a way I can preload the font with javascript instead?

 

[iiceman]

I don't think so. I searched that a while ago and didn't find another way. But it's not a bad solution. I experienced that you have to wait for the font to load, too with something like $(window).load(function(){...}); If I didn't the font was noch always loaded when I tried to write my text on a (2D) canvas.

[ozRocker]

oh crap!  So you're saying my method can result in race conditions and its better to use $(element).load() to serialise operations?  I guess this hasn't happened 'cos my initial scene load causes a long enough delay. So for the sake of "safe" programming I should have something like this:

<div id="hidden" style="position:absolute; top:-200px; left:-200px; font: 22pt GillSansMTProExtraBold">hidden</div><script>    $("#hidden").load(function(){        //Add 3D text into scene    });</script>

(I do use stylesheets, but for demonstration purposes I'm using inline styling)

[iiceman]

Okay, I searched what I did in that project, and now I remember that even the .load thing didn't quite catch it so I ended up with this:

document.onreadystatechange = function() {	if (document.readyState === 'complete') {		$('.maincontent .contentRight h2').each(function () {			drawFancyHeadline(this);		});	}};

This was not a babylon project, though, I just used a canvas to draw some fancy headings instead of the normal boring h2 headings. But while testing on my local PC I noticed that it sometimes didn't use the webfont I included. If you didn't experience that issue, it might not be a problem for you. But if you want to make sure everything is ready I guess you could use the above code (I just googled it myself, so don't ask me what exactly the difference between the jquery ready and the onreadystate complete is )

 

Well, I hope it helps

[ozRocker]

Just did some research.  Jquery ".ready()" executes as soon as the DOM is constructed.  It is equivalent to document.readyState of "interactive".  But when all resources have loaded you will get document.readyState "complete".

 

Here's an explanation of the Javascript .load() event (not to be confused with the JQuery .load() command):

 

This event works with elements associated with a URL (image, script, frame, iframe), and the window object.

Depending on the browser, the load event may not trigger if the image is cached (Firefox and IE).

[iiceman]

Makes sense, so I did it right, eh?

[ozRocker]

Well according to you and that website I quoted from, .load() doesn't always work, so your code snippet is the safest for this workaround.  If you say you did ask around before to see if there was another way to preload the font, then I guess this workaround is the best option