Hi, Jedi’s )
Please, escape me from trap. I waste 2 awaful days without any results ((
Here is situation
We have MeshButton with AdvancedDynamicTexture and TextBlock
First time (on playground, while font not in cache) - changes font not worked
Second run font properly changed
I suggest becauce it placed in browser cache and loaded very faster, before some ready statuses for Texure or text block or…??? is setted to true
I was try - checked togheter fonst.ready status, AdvancedDynamicTexture onReady, Internal texture ready, TextBlock dirty. No way.
In my simulator if we make “crutch” as just 500ms timeout and set after this time fontFamily that way:
(ts._texture.getChildren() as Container).children.fontFamily = ‘Roboto’; all is ok, but i very need code without ‘crutch’s’ & would like understand how it works.
Please could you help me?!
The font won’t be loaded until an element is using it. So you should create an element using this font family to force the browser downloading the font right away and not at the first frame:
Yes, exacly, but it is not fairly solition
Situation with lazy font loading and dynamicly changes font for existed elements is normal and can be.
Additional, BABYLON can do this, as we can see, if switching is after some time.
Question is more complex - how condition we need to check for sure - now we can switch font for TextBlock and font will switch properly, as BABYLON already now can do.
Well, you know for sure that a font has been loaded by adding a function to
document.fonts.ready.then, but as explained above you must be sure that the browser has started loading the font by using it in a HTML element. Maybe there’s a possibility to load the font size ourselves by code and instruct the browser of the new font but I don’t know HTML well enough to know.
Thank you for help!
In this time we have FontFaceSet WebAPIs and not required any external observers, but i need some other - changed settings after pass some time, not wait all this time for start drawing interface.
- Load fonts
- Wait, while fonts is loaded
- Draw interface
- Draw interface (and give user possible interract with that as soon, as possible)
- Load font
- Wait, while fonts is loaded
- Update interface
Well, we can just rebuild AdvancedDinamycTexture, when new font loading, but i think it not very good way. So, i will continue trying, if found some intresing, will make upd for this topic.
Thanks for answers and direction!
Yup would be great to benefit from your experience here and maybe we could then add a standard way in the framework for it
In total… all is simpliest )
We can use FontFaceSet API FontFaceSet - Web APIs | MDN
- force loading font: document.fonts.load
- checking font state: document.fonts.load or document.fonts.ready promise
then, we can just update textBlock.fontFamily property or create and apply AdvancedTexture style, when we need.
If we have many fonts and need choisen one - we can use FontFaceSet.check method
All it in doc, and only one small hints:
- We can use just text-element with font style in html page for browser start font loading. Because before FotnFaceSet.load or page naven’t that block font loading not invoked.
Probably it can save some time )