Jump to content

Failing to load custom font using PIXI.loader()


Johnny Kontrolleti
 Share

Recommended Posts

EDIT:

I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well.
One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning?

 

OLD:

I'm currently trying to load a custom font to use is in combination with `PIXI.text()`.

I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's necessary to  create an XML file. 
After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. 

I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? 

constructor($el, app) {
    this.app = app;
    this.title = $el;

    const loader = new PIXI.Loader();
    loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => {
        this.text = new PIXI.Text(this.title.innerHTML, {
            fontFamily: "font",
            fontSize: 120,
            fill: "transparent",
            stroke: "white",
            strokeThickness: 1
        });

        this.getPosition();
        this.app.addChild(this.text);
    });
}

Using `fontFamily: resources.font` instead returns the following error:

Quote

this.fontFamily.split is not a function

FYI: I added the .fnt file to the appendix.

font.fnt

RL Unno.woff2

Edited by Johnny Kontrolleti
Link to comment
Share on other sites

That is the problem out of scope of pixijs. https://github.com/bramstein/fontfaceobserver/

Just dont render text before all fonts are loaded. By render i mean 1. render is called from app ticker 2. your text is somehwere in app.stage subtree. 

You can set "text.renderable=false" before its actually ready, or call text.updateText() when everything is ready... If you use any hacks - prepare to read pixijs Text code ;)


 

 

Link to comment
Share on other sites

11 minutes ago, ivan.popelyshev said:

That is the problem out of scope of pixijs. https://github.com/bramstein/fontfaceobserver/

Just dont render text before all fonts are loaded. By render i mean 1. render is called from app ticker 2. your text is somehwere in app.stage subtree. 

You can set "text.renderable=false" before its actually ready, or call text.updateText() when everything is ready... If you use any hacks - prepare to read pixijs Text code ;)



 

 

Did the trick! Thanks again! 

Link to comment
Share on other sites

  • 1 year later...

@ivan.popelyshev Could you explain how you would do this? Seems like setting the text.renderable flag to true in the animation loop does not work for me since the fonts are not loaded i guess. What helps to is creating the text elements empty and update the text content in the animation loop. Would you do it like that or is there a better way?

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...