Font Incorrect sometimes with Babylon.GUI

Bugs
1

I am using the Babylon.GUI to put text into my scene and the fonts that I am using are from Adobe Fonts, where I use a specific CSS link on my page to include the fonts. The work perfectly fine on the web page, but sometimes when used in a TextBlock, the font displays as Times New Roman. In some cases refreshing the page works to show the fonts correctly. Is there anything I can do or wait for to insure that the fonts load correctly when using the Babylon.GUI?

2

Adding @msDestiny14 to have a look into it :slight_smile:

4

Hello!
This happened to me as well but it was due to importing the font in a wrong scope so please be sure to test your font and the scene in one basic html page with nothing else involved.

5

If it’s coming in on refresh I’m wondering if its a async issue. You should check if that font is loaded before assigning it. If not assign it later on or have some kind of callback on the font loading.

6

Have a look at this commit:
react-babylonjs v3 + font loading · brianzinn/create-react-app-typescript-babylonjs@51d52ee (github.com)

Essentially, the font may not be loaded yet depending on how you are loading your page. The fix ends up being something like:

if (document.fonts.check("16px FontAwesome") === false) {
    document.fonts.load("16px FontAwesome").then(() => {
        referenceToAdvancedDynamicTexture.markAsDirty();
    });
  }

I did some experimenting with ADT where I was working to add a list of fonts on creation and then the ADT (or controls using that font) would mark itself as dirty when those font(s) were loaded and notify child controls recursively. I think it would be a nice addition to the main library. I went down a rabbit hole of having a fallback font with fallback text and then realized it probably would be something the community didn’t really need, so I had abandoned that work! :slight_smile: Also, check out the typings file for document.fonts, which you may need in a TypeScript project. HTH.

3 Likes