Failing to load custom font using PIXI.loader()

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