Phaser 3 Basics: Custom Fonts

In this guide, we will be covering how to load custom fonts, specifically TrueType fonts, with Phaser 3. To begin, you will need a scene setup for this guide. If you don’t have a scene made already, you can learn how to create one here. Essentially, you need to define a new font face with CSS, create a div utilizing the font to “load” it, and finally reference it within our game code.

If you have an external CSS file, you can add the following code there. If you have a pair of tags in the head of your index.html file, you can also add this code there. Here is the styling code to add:

@font-face {
    font-family: <your font name here>;
    src: url('media/thefont.ttf');
    font-weight: 400;
    font-weight: normal;
}

Before you define your game scripts in the body, add the following div to “load” the font for use with Phaser.

<div style="font-family:<name of font you defined>; position: absolute; left:-1000px; visibility:hidden;">.</div>

To use our custom font within our game, let’s try adding the following text object to the create method of our scene.

this.add.text(128, 128, 'This is a test.', {
    fontFamily: '<the font you defined>'
});

At this point, you should see the test text we wrote printed on the game screen in the custom font. With the right custom fonts, so much can be added to the character and atmosphere of the game.

If you found this guide valuable, be sure to check out the rest of the parts in this tutorial series. You can also subscribe to our newsletter to receive news about our latest tutorials and courses. Sharing this tutorial on your favorite social media platform is also much appreciated.