Sign in to follow this  
Johnny Kontrolleti

Failing to load custom font using PIXI.loader()

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

Share this post


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

Share this post


Link to post
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 ;)


 

 

Share this post


Link to post
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! 

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.