Font Incorrect sometimes with Babylon.GUI

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?

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

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.

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.

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

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(() => {

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.