Pixi custom font not working

[temp123]

I am using pixi-legacy version 7.3.2 and I am trying to create text using custom font (.otf font file) and add it to the stage of pixi application. Down below is demo version of how I am trying to achieve that but seems like pixi will always use some default font (Times New Roman in my case).

 

One solution I found was to call updateText method on pixi Text instances but I dont like this solution as I dont wan't to save all the references to Text instances throughout the project. Is there any other solution? How to ensure that font is loaded before continuing with the code execution. Seems like async/await doesn't work here.

 

import { Application, Assets, Text } from "pixi.js-legacy";

class testClass {
  font;
  app;

  constructor() {
    this.app = null;
    this.font = null;
  }

  async init(canvas) {
    this.app = new Application({
      width: 600,
      height: 120,
      backgroundColor: "0xffffff",
      view: canvas
    });

    // add and load font
    Assets.add({
      alias: "font",
      src: "path/to/font.otf"
    });

    this.font = await Assets.load("font");

    // create text
    let txt1 = new Text("Some Text", {
      fontFamily: "font",
      fontSize: 60,
      fill: "0x000000",
      fontVariant: "small-caps"
    });
    txt1.anchor.set(0.5);
    txt1.x = 300;
    txt1.y = 60;

    // add text to stage
    this.app.stage.addChild(txt1);
  }
}

export { testClass };