TTF Font not loaded properly

[hyude]

I have posted it in my other thread, but it seems better to add it in new Thread, because the latter is already answered.

 

I have tried using fontface for .ttf file.

 

However strange things occured. Somehow, the font is not loaded (thus using default font) when the first time I use it. However, when I restart the game state (using Game.state.play('current_state')), the font works.

 

Setting the text manually using font.text = 'my_string' also fixed this problem.

 

My guess is, the cause for that is because the font hasn't finished loaded when phaser object created.

This is more confusing because I create phaser object at window.onload event (so, it will fired after all resources load finished).

Even more so, I go through Boot State and Preloader State before going into Play State.

 

Can anyone give me insight on that?

What might cause this behavior

 

Thank you.

[lewster32]

You may benefit from using something like this: https://github.com/patrickmarabeas/jQuery-FontSpy.js

[hyude]

Does that mean, that my case is the expected behavior of using fontface?

Does fontface is loaded differently than any other asset, that somehow it is still loading even after window.onload event triggered?

[lewster32]

I'm not sure to be totally honest, window.onload should fire when the DOM is ready AND all images, scripts and so on are loaded (which can take a long time) but I guess there has to be a line drawn regarding what exactly is counted, as potentially a webpage could never stop loading with XHR, scripts dynamically including stuff and so on.

[hyude]

Ahh, that makes sense. So if I include Splash Screen for about 3-5 second, the font should probably finsihed loading.

Is that a reasonable workaround for this?

[lewster32]

Probably not - a timer is never a good solution as you're basically just increasing your chances of it working, rather than ensuring it works. I'd try the FontSpy solution as this is tailored to ensuring a font is loaded and usable before continuing.