Inconsistent availability of font for PIXI.Text

[mobileben]

I have a bit of a head scratcher. I am using web fonts, which I load prior to starting. I've defined these as @font-face in the style tags. I include these in my assets folder with all my assets. I can verify via the Developer tools the font is indeed loaded.

I've noticed a strange behavior where the font is not always used. 

I am currently using Roboto as my standard font during prototyping. This is a sans-serif font. It seems that when I try and use a font that doesn't "exist", it defaults to a serif font which is probably Times Roman, as I'm testing on Chrome. So visibly, it is obvious when the text is Roboto versus Times Roman.

I've noticed that for certain text, it seems to use the default font versus Roboto. I've dumped out the text style and it's the same for the text. The TextStyle settings I set are fontFamily (Roboto), fontSize, fontStyle (always normal), fill, and align. I do sometimes set fontWeight (either normal or bold).

What is bizarre is that the exact same TextStyle will fail for some text. I've noticed in particular, numbers will fail. By fail I mean it ends up using the default font, Times Roman.

Another odd thing I noticed is the fontFamily should be "Roboto". In Chrome, if I use "Robots-Regular" everything will work. However, when I try and use this on iOS (Cordova), then it uses the default Times Roman.

Note usage of PIXI.Text doesn't matter. It's interleaved, but always the same items use the default. So I'm investigating it more for user error. But it seems very strange behavior that using Roboto-Regular versus Roboto will make it always work on Chrome (but then fail in iOS).

I'm trying to find in the pixi code where it makes the decision point on the font to see if I can at least try and better deduce why this is happening.

[d13]

I don't know if Pixi's loader deals with this problem, but browsers will never actually load a font until they're requested to display it. In the past I've had to solve this problem by creating a hidden HTML element that uses the font, just so that the browser is prodded to load it. Here's code I've used in the past to fix this problem:

https://github.com/kittykatattack/hexi/blob/862cb6f7773d80d7f67f7314855593f7f0e680bd/src/core.js#L415-L455

I've done tons of research on this problem in the past and this was the best solution I could find ... but this was a few years ago - hopefully there's a better solution out there.. ?

[Exca]

I have been using font.js to handle font loading https://github.com/Pomax/Font.js?files=1

Though the loading method is not exactly perfect, it usually works in most cases.

[mobileben]

So the one quirky thing about this problem is that it the font fails at times after it's already been used. So, for example, if I am creating a PIXI.Text for the following strings: ONE, TWO, 3, FOUR. The PIXI.Text are instantiated in that order.

ONE, TWO, and FOUR will be Roboto

3 will be the browser default, Times Roman

From what I can tell the PIXI.TextStyle is the same. Since ONE and TWO are created before 3, I can assume that Roboto is loaded.

 

[mobileben]

Okay, a quick update on this. I solved it, though it really doesn't answer why the strange behavior existed. It seems the trick is adding "sans-serif". As an example, the data I store to define the font looks like this.

fontStyle: {
    family: [ "Roboto", "sans-serif" ],
    size: 20,
    weight: "bold",
    alignment: "center",
    color: 0xFFFFFF
}

@d13, I load the font this way

<style type="text/css">
    @font-face {
        font-family: "Roboto", sans-serif;
        src: url("assets/Roboto-Regular.ttf") format('truetype');
    }
</style>

 

[jonforum]

you need load font after,inside a div and delete after.

Or more easy way if you understand promise  and documents .fonts
this is how i load my font for my game
 

            const loadFonts = () => {
                return new Promise((resolve, rej) => {
                    const fontsList = [
                        new FontFace('ArchitectsDaughter', 'url(fonts/ArchitectsDaughter.ttf)', { style: 'normal', weight: 700 } ),
                        new FontFace('zBirdyGame', 'url(fonts/zBirdyGame.ttf)')
                    ];
                    fontsList.forEach(fonts => {
                        fonts.load().then(function(loadedFontFace) {
                            document.fonts.add(loadedFontFace);
                            //document.body.style.fontFamily = '"Junction Regular", Arial';
                        });
                    });
                    document.fonts.ready.then(()=>{ resolve() });
                })
            };

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

Edited November 9, 2019 by jonforum

[mobileben]

@jonforum Cool, thanks that looks very helpful and always good to learn new tricks.

I was using WebFonts at first, but from what I could tell, it didn't quite work with "local" assets. As I am also using Cordova for mobile, it seemed silly to do a fetch over the network for fonts I can bundle in.

[jonforum]

6 hours ago, mobileben said:

@jonforum Cool, thanks that looks very helpful and always good to learn new tricks.

yes in dev we learn all day
i never test this on Cordova  for publish Android or Ios , so i can say  nothing about this kind of approach for mobile sorry.

Edited November 10, 2019 by jonforum

[themoonrat]

I use https://github.com/bramstein/fontfaceobserver to load custom fonts, which handles the required hackery for you!