FontFamily for TextBlock in AdvancedDynamicTexture

Questions
1

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 image

Second run font properly changed

image
image784×549 24.6 KB

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()[0] as Container).children[0].fontFamily = ‘Roboto’; all is ok, but i very need code without ‘crutch’s’ & would like understand how it works.

Please could you help me?!

2

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:

1 Like
3

Yes, exacly, but it is not fairly solition :wink:

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.

1 Like
4

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.

1 Like
5

Hi. I think fontface observer helps you How to make sure that all fonts are loaded before to start BABYLON.js? - Questions - Babylon.js
https://www.babylonjs-playground.com/#J3X1EJ#2
Something like this
fontfaceobserver/test at master · bramstein/fontfaceobserver · GitHub

2 Likes
6

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.

Common solution:

  1. Load fonts
  2. Wait, while fonts is loaded
  3. Draw interface

My needs:

  1. Draw interface (and give user possible interract with that as soon, as possible)
  2. Load font
  3. Wait, while fonts is loaded
  4. 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!

7

Yup would be great to benefit from your experience here and maybe we could then add a standard way in the framework for it :slight_smile:

8

In total… all is simpliest )

We can use FontFaceSet API FontFaceSet - Web APIs | MDN
for:

  • 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:

  1. 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.
    <span style="font-family:‘MyFont’> 

Probably it can save some time )

4 Likes