FontFamily - What is available? How to add 3rd party fonts?

[ziguri]

Hi,

As stated in the documentation the fontFamily can be set as described in the BABYLONJS HowTo

https://doc.babylonjs.com/how_to/gui

My Question: Which font familys are available?

How can I add a new TTF-File?

Does there exist a Import or Load Function for Fonts?

Thx!

[Wingnut]

Hi ziguri... cool question.  A quick guess by me - I think BJS GUI system follows the rules of the HTML5 Canvas Element.

And that... my friend... is a DOM subject, so you can read about it on the web... such as here.  https://stackoverflow.com/questions/2608022/how-can-i-use-custom-fonts-in-an-html5-canvas-element

More generally, maybe here.  https://www.google.com/search?q=HTML5+canvas+fontfamily

I THINK... IF the fontFamily works for an HTML canvas, it can be used in BJS GUI, too.  Stay tuned for wiser comments, though... because I could be wrong, but maybe not. 

[Guest]

@Wingnut Correct

[Wingnut]

Hey ziguri... I tried to find a BAbylonJS Playground demo... that loaded-in ttf file, but I couldn't find one.

Anyway, I don't know if you have ever seen people creating and/or setting styles on HTML... from within a BJS scene.  So, here's one.,

https://www.babylonjs-playground.com/#8E7IHP#20

Lots of styles being set and html nodes being created.  Some kind of colorful stuff is in the upper left corner... likely html nodes.

I did a playground search for div.style... to find some of these playgrounds.  http://doc.babylonjs.com/playground/?code=div.style

A search for 'createElement' finds far more:  http://doc.babylonjs.com/playground/?code=createElement

On this page... https://stackoverflow.com/questions/2608022/how-can-i-use-custom-fonts-in-an-html5-canvas-element

...I noticed some CSS style stuff:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

I suppose you will need to somehow create that... from within a BJS scene, using JS.  Maybe it can be done in the HTML of the page... but I think it would be cool to try to pull-in a ttf file... from within a playground scene... and use it in some BJS GUI textblocks.

Of course... the ttf files, or woff, or eot... need to be published in a location that CORS approves-of... perhaps from the folder of a free github account.

Let's see if we can get some help from others... too.  I have never tried this... but it is interesting.  I want to advance this... do some learning with ziguri... see if we can blow up the planet or something.  :)

Stay tuned, and/or teach us what you discover, z!  thx!

[ziguri]

@Wingnut thanks for you amazing effort.

I was able to include the ttf-Font using exactly the way you said. I added the font face via CSS.

@font-face { 
    font-family: 'Ethnocentric';
    src: url('./assets/fonts/ethnocentric.ttf') format('truetype'); 
}

But, i do have on further issue:

I do have a small UI with a few checkboxes and sliders, and some text using this font. The fonts are not loaded initially with my scene. Once i interact with the UI (e.g. moving the slider or pressing the checkbox) the correct fonts are shown.

Do you have any idea?

[Wingnut]

Cool!  Possibly...  look for a .markAsDirty() method on something... such as the AdvancedDynamicTexture or maybe on the GUI control.  You would want to call this... after the .ttf is finished loading... somehow... maybe in a body.onload function or something?  *shrug*.    Maybe in a scene.executeWhenReady().  I wonder if the BJS AssetsManager has some options for pulling-in fontFamilies, or could have it added.  Hmm.  Seems too DOM-ish for BJS scene code to get involved... but... it would be nice if GUI waited-for the ttf load to finish.

Maybe others have ideas/comments.

Anyway... whatever.markAsDirty();    ...could be a trigger for "needs refreshing".  Just a guess... something to try. 

https://www.babylonjs-playground.com/#91I2RE#55

I see lots of .markAsDirty() happening in the above custom GUI control mess... so it might be important.  Write back. 

[ziguri]

Well I think its a Font-Loading-Issue. markAsDirty() is a good idea - but first i need to know when the font is loaded successfully in order to mark the specific control or texture as dirty.

Is there a way to only render the scene if the font is loaded sucessfully via CSS?

[ziguri]

I found a kind of workaround solving my issue.

Setting the specific font as default font directly in CSS:

html, body {
    font-family: 'Ethnocentric';
}
@font-face { 
    font-family: 'Ethnocentric';
    src: url('./assets/fonts/ethnocentric.ttf') format('truetype'); 
}