How to Use Custom Fonts in Phaser 3

Using custom fonts in Phaser needs some preparation. In this tutorial, we will look into how to go:

Before and after using custom fonts in Phaser3

Preload the Custom Font

The first step is to preload your custom font family through the head of your HTML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Phaser Game</title>
        <link rel="preload" as="font" href="assets/Custom-Font.ttf" type="font/ttf" />
    </head>
    <body>
        <script src="assets/phaser.js"></script>
    </body>
</html>
index.html
Copied to clipboard!

For this to work, you want to use a <link rel="preload"> with two important attributes:

This tells the document to treat the file with high priority and preload it as soon as possible.

Learn Phaser with Udemy

Define the new font in CSS

To make it available in Phaser, define the new font family in your CSS that is linked to your document, with the @font-face at-rule:

@font-face {
    font-family: CustomFont;
    src: url('./Custom-Font.ttf');
}
font.css
Copied to clipboard!

Using the Custom Font

To use this font in Phaser, simply reference it in one of your styles, as a fontFamily property. For example, to use it for a button, you can do:

scene.add.text(x, y, 'Button', { fontFamily: 'CustomFont' });
phaser.js
Copied to clipboard!

To summarize, you need three steps in Phaser 3 to use custom fonts:

  1. Preload the custom font family through your HTML file
  2. Define a new font-face in CSS for the new font
  3. Reference the new font in Phaser
Building The Game Breakout Using JavaScript

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Read more on
πŸŽ‰ Thank you for subscribing to our newsletter. x