Failing to load custom font using PIXI.loader()

[Johnny Kontrolleti]

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 April 29, 2020 by Johnny Kontrolleti

[ivan.popelyshev]

> The problem is, that nothing happens on mouseover.

this.title.interactive = true

[Johnny Kontrolleti]

13 minutes ago, ivan.popelyshev said:

> The problem is, that nothing happens on mouseover.

this.title.interactive = true

Thanks got it working. There's one more problem though - PIXI.text() won't take my custom css @font-face font, until it's hovered. 

I edited the post above likewise.

[ivan.popelyshev]

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

 

[Johnny Kontrolleti]

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! 

[cwirz]

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