mobileben

Inconsistent availability of font for PIXI.Text

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.. ?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 by jonforum

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites
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 by jonforum

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.