How to make sure that all fonts are loaded before to start BABYLON.js?


I have the problem that my texts are rendered before the fonts have been loaded, so that my menu looks like this:

Instead of:

NOTE: to resize the windows refresh the fonts; but I would like to automatically refresh the fonts once they are loaded.

So you can add an event at DOM elvel to get called when the font are loaded (onload)
then force an update of the ADT with


Please don’t use domain expert’s abbreviations, took me 30min to find out that you mean adt = AdvancedDynamicTextures ^^.

So here is the solution I came up with, using FontFaceObserver:

async load(){
        //   @import url('|Mali:400,700|Patrick+Hand');
        await Promise.all([
            new FontFaceObserver('Mali', {weight: 400}).load(),
            new FontFaceObserver('Mali', {weight: 700}).load(),
            new FontFaceObserver('Kalam').load(),
            new FontFaceObserver('Patrick Hand').load()
          ]).then(() => {
            console.log('Output Sans family has loaded.');

Then I create my menu.

I tried without the await and adding this.UIRoot.markAsDirty(); in the .then() but that did not work: one of the text was not updated!

1 Like

you are an expert now:)

1 Like

I use this:

edit: just realized OP came up with same solution. Too bad I didn’t see this sooner.