Ability to specify a global font family in Babylon GUI

Hello All,

After scouring the docs and forum, I dont seem to find any mention on how to set a default font family for babylon.js gui? Looks like it’s using the system default.

I’m aware I can set fontFamily at the element level, but that would require me to refactor my whole GUI.

Anyway, is there a way for me specify a global font family for all my GUI elements (maybe at the AdvancedDynamicTexture level) or do I have to set them one by one?

I really like how Babylon.js GUI works in general and I feel like it would make sense if a GUI element could inherit font family from parents and If nothing is set, then potentially inherit from any relevant css? what are your thoughts?

Cheers,
Orion

1 Like

According to the docs, if you set a font family on a container, all controls will inherit it. I don’t think that will work on the ADT, but you could add a container at the root of the ADT and place all your controls inside it.

Font family can be inherited. This means that if you set it on a container, it will be transmitted to all children of the container

1 Like

Hi @vrhermit, thanks for the answer,

After doing some testing, it looks like it only inherits from parent if fontFamily: “inherit” is specifically set on the child? It feels like inherit should be the default? Maybe I’m missing something?

// edit: fix playground as i linked the wrong one

1 Like

Hi!

I agree, it should be set to inherit by default however after looking in the source code I can see it is set to ‘Arial’.

@carolhmj I think you are the right person to address this to :slight_smile: What do you think?

It does make sense to me, through changing it now would be a breaking change so probably it would need to be a new option on ADT creation, maybe something like “inheritFonts” set to true :thinking:

Yeah, something on ADT or on containers that would let us tell all child component to inherit a specific font family.

I don’t think there is a way to specify the font on the ADT, but we can do so on container objects.

An alternative approach would be a function on ADT or containers where we can pass in a font and have it applied to all children. Something like

overrideChildFontFamily(fontFamily)

What about to add an options parameter to the ADT where we could specify fontFamily and maybe other defaults in the future?

We’re thinking about adding a strictCSSCompatibility flag, which when true will, well, enforce that our behavior follows the CSS baseline of inheriting whenever possible. This applies to font family first, but would eventually apply to all other properties.

2 Likes

I was experimenting with this PG, and I just found out that if you don’t specify font size, then it does inherit from the parent without needing the inherit keyword! This is probably happening because without a fontSize, it doesn’t need to set its own font property, so it uses its parent’s: Babylon.js Playground (babylonjs.com)

Hi @carolhmj thanks, that’s good to know.

Have you guys decided if the strictCSSCompatibility will eventually be implemented?

Yup we talked a bit about that yesterday and decided that, since this behavior with the fontSize is a bit weird and clunky, it can be considered a bug and we don’t need to add a flag for back compat. So once this PR is merged: font inheritance changes by carolhmj · Pull Request #14431 · BabylonJS/Babylon.js (github.com), the inheritance should work even when a fontSize is set :slight_smile:

3 Likes

Thanks @carolhmj This is a great improvement :slight_smile:

2 Likes

@carolhmj Just tried v6.25 and I think something is very wrong, you should be able to specify fontSize on a children? Currently does not work?

Looks like if I dont specify a fontFamily on the child, it takes the size of the first parent with a fontFamily specified?

the font inheritance is working though, that’s great,

But all controls are taking the default font size I set on the main control. Despite having specified different fontsizes.

It looks like this PG is behaving as expected? The font size is correct, at least

Agree with @carolhmj I tried on this PG https://playground.babylonjs.com/#QFK9K4#35 and the font size is the one placed in the child. What are you seeing @oriongu ?

Thanks @sebavan & @carolhmj

Ok, looks it only “breaks” on the playground if fontSize or fontFamily is set as “inherit” in either child or parent but that’s probably normal?

On my project however, since 6.25, after setting my default fontSize and fontFamily, none of my childs controls are respecting the specified font size (my previous image shows all fonts are the same size). Like the inventory header is clearly set to 24px… If I remove my defaults, the fontsize do kick in. anyway something feels off.

It’s possible it’s something to do with my code, but it’s all pretty straightforward…

// UserInterface.ts line 107
const uiLayer = AdvancedDynamicTexture.CreateFullscreenUI("UI_Player", true, this._scene);

const uiLayerContainer = new Rectangle("uiLayerContainer");
uiLayerContainer.width = 1;
uiLayerContainer.height = 1;
uiLayerContainer.thickness = 1;
uiLayerContainer.fontFamily = "Times New Roman, serif";  // default font
uiLayerContainer.fontSize = "14px"; // default size
uiLayer.addControl(uiLayerContainer);

// client/Controllers/UI/Panels/Panel.ts line 125 
panelTitle.fontSize = "24px";

EDIT 1 : After looking at my previous image, I just realize only the experience bar is respecting specified font size… makes no sense to me.

EDIT 2: If I specify a fontFamily, the specified font size are respected

Yep, I wonder if there isn’t an “inherit” somewhere in your GUI chain that is causing this?

Would be amazing if you have a repro @carolhmj can play with ?