Hey everyone! I used a variety of methods to load custom fonts in Phaser games. After some reading and experimenting, the FontFace object is literally the best thing to happen to me. I decided to write a blog about it because I don’t want to forgot how I did it haha, and hopefully it helps you too.
My usual setup involved NPM + TypeScript. However, it shouldn’t be a hard jump if you’re one to load Phaser with the script tag.
Your approach is fine but there is a plugin to load web fonts that fits better in the current Phaser loading flow - https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/
It’s not just for google web fonts, you load your own custom fonts with this plugin.
It uses webfontloader, which I don’t like using (fear of software that’s no longer updated? lol). I need to explore Phaser plugins more! However, that plugin still requires CSS, whereas I prefer the pure JS method for the time being 
You can create a Phaser.Loader.File class for this and then use it in preload().
That is an awesome suggestion, I’ll try to carve out some time and give it a go!