Custom fonts + Typescript

I’m having a problem working things out using Phaser with Typescript, I’m stuck at fonts.

bitmapFont needs to be fed XML file, which seems to be a pretty tricky task to pull off, since Typescript has only JSON support. Even libraries that read XML just transform it to JSON, so I don’t see how I can get this thing working.

Legacy bitmapFont just throws a bunch of errors, it doesn’t seem to be supported anymore, since game.cache is protected and only CacheManager can access it.

So I’m left with importing font using css, but that also seems to fail. The font loads in the project, since I can use it in a plain div, but using add.text it doesn’t load it at all.

Is there any standard, proven way to do custom fonts, when using Phaser + Babel + Typescript + Webpack configuration?

1 Like

I have used custom fonts in this example I wrote in TS.

They are not bitmap fonts, but I hope it will still help you.