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?
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
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?
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
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.
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)
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
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
What do you think?
