# Loading fonts in Phaser with only JavaScript

**URL:** <https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393>\
**Category:** Phaser 3\
**Created:** [December 17, 2020, 2:53am UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393 "2020-12-17T02:53:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\
**Post date:** [December 17, 2020, 2:53am UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393/1 "2020-12-17T02:53:11Z")

</div>

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.

> **[Loading Fonts in Phaser with FontFace](https://msanatan.com/2020/11/08/loading-fonts-in-phaser-with-fontface/)**
>
> For the Devtober I made a casual mobile game - Hyper Match. I built it with Phaser 3 and TypeScript, and learned quite a few new skills in the process. In my last Phaser game, I used the popular but o

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.

---

<div class="post-metadata">

**Author:** ![vforsh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/vforsh/32/5803_2.png) [@vforsh](https://phaser.discourse.group/u/vforsh)\
**Post date:** [December 17, 2020, 8:16am UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393/2 "2020-12-17T08:16:27Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\
**Post date:** [December 18, 2020, 4:08am UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393/3 "2020-12-18T04:08:48Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 18, 2020, 6:55pm UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393/4 "2020-12-18T18:55:52Z")

</div>

You can create a Phaser.Loader.File class for this and then use it in `preload()`.

Note [https://caniuse.com/mdn-api\_fontface](https://caniuse.com/mdn-api_fontface).

---

<div class="post-metadata">

**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\
**Post date:** [December 19, 2020, 1:07am UTC](https://phaser.discourse.group/t/loading-fonts-in-phaser-with-only-javascript/8393/5 "2020-12-19T01:07:45Z")

</div>

That is an awesome suggestion, I’ll try to carve out some time and give it a go!