What is the recommended method for loading fonts for GUI.TextBlock, etc?

Questions
1

Hello!

Dan from Frame here.

We’re running into some issues with loading Google Fonts in GUI.TextBlock using both block.fontFamily directly and also by applying block.style utilzing style.fontFamily.

It seems that the font will not load for the initial load, but does for subsequent loads. This leads me to believe that the font is not loaded into memory yet, but I’ve also tried importing the font definitions by importing scss with something like import './styles/fonts.scss"; and no dice.

The method above was marked as a solution here: How change & add fonts that is at TextBlock - #9 by nedcrow

As a rough test, I also tried delaying the instantiation of the class object – which creates these blocks – up to 20000 ms, which didn’t seem to work either.

One thing we noticed is that hovering over a GUI.Button updates the font, but the spacing is off, possibly due to using the default font definition and not updating?

Found a few other methods which seemed pretty hacky IMHO, but no luck so far, regardless.

What we should see (and sometimes see on subsequent page loads):

image
image547×794 55.2 KB

What we see on initial load:

image
image555×805 52.9 KB

What we see after hovering over the button (note the incorrect alignment):

image
image521×791 50.7 KB

Curious if there is a suggested method for loading Google/custom fonts for GUI.

Any help here is greatly appreciated.

Tagging @danilopasquariello as he’s also currently experiencing this.

Thanks so much!

2

Just curious but can you try to display the font in the html page (even with opacity set to 0.00001 to force the browser to get it ready?)

3

Our index.html page is generated dynamically with a Webpack plugin, so there’s no direct editing of the page, but will try to inject it.

Will LYK how goes. Thanks @Deltakosh !

4

@Deltakosh

This does seem to work by creating a DOM element and injecting, however, it also requires us to set the appropriate fontWeight used in the TextBlock.

This is what I used to test:

// Test Poppins font load
const textElement = document.createElement('span');
textElement.style.fontFamily = 'Poppins';
textElement.style.fontSize = '200px';
textElement.style.fontWeight = '700';
textElement.innerHTML = 'GET STARTED';
document.body.appendChild(textElement);

Glad to see this working, but seems a bit unmanageable with the use of various fonts and font weights.

Any suggestions other than doing this for every combination?

Appreciate the help and quick reply!

5

Maybe this thread will help: