Text2D delayed font loading

[TMTH]

Sprite2D expects that underlying texture may not be loaded on sprite2d creation. It waits for texture to load, and everything is working fine.

But the same problem can arise with Text2D, when using custom font, embedded into css/html.  When Text2D object is created, it tries to create font texture, using supplied font parameter. But that font has to be loaded, and that is the process that takes time. So there is no font to use.

In Firefox it leads to rendering Text2D objects without any text at all, soft page refresh fixes it.

In Chrome one of the system fonts is used instead of required font. Soft page refresh doesn't not fix it, you have to recreate Text2D object.

@Nockawa, is there any work around for this?

UPD: One can use Bitmap font, that do know about loading time, and waits for underlying texture to load. But is that the only way to deal with the problem?

 

[Nockawa]

you mean by using the bitmapFontTexture setting ? Yes I can remember now that I didn't use the same codeblock than Sprite2D to manage late texture loading.

I can fix it pretty quickly I think, as it's an issue I already solved. Here the Trello Card. I will ping you once I start working on the fix and when I'm finished.

[Nockawa]

@TMTH I'm starting to work on your bugs, can you test the latest Preview Files and tell me if this issue is solved, as I have no PG to reproduce it, I can't test it myself.

If this attempt doesn't work, I think we will have to make a PG/Test Case in order to avoid a big ping-pong game of PR/Tests. Thanks

[TMTH]

@Nockawa, that's not actually a bug. BitmapFontTexture is working properly.

That was a question about using regular FontTexture "when using custom font, embedded into css/html ". So, when I have:

@font-face {
    font-family: AAA
}

 in my css, and refer to that AAA font in Text2D settings, font is not always loaded to the client when Text2D starts to render. So, text is rendered using some default browser substitute. The same thing can happen with ordinal html, but after loading the font browser usually re-renders text. And the question was - can we do something with it, or the only way to use custom font is to use bitmap font texture.

[BitOfGold]

I use this in html (before including babylon and other javascript):
<div style="font-family: basictitlefontregular;">.</div>
I know this is still a bit about luck, but 99% the font is ready at starting the engine.
 

[Nockawa]

Well, I summon @Deltakosh and @davrous on this, because it's HTML related and I don't know much.

When you say custom font, you still mean using the "fontName" setting, but with a fancy value, right?

[Temechon]

You can use a custom font loader : https://github.com/bramstein/fontfaceobserver

Example : http://www.babylonjs-playground.com/#2AVSFH#107

[TMTH]

@Temechon, thanks. That solution will solve my problem.