How should I load a custom font into my scene?

Phaser 3
1

Hi there, so I’ve encountered a problem when trying to use custom fonts. I tried to follow this tutorial: https://www.webtips.dev/webtips/phaser/custom-fonts-in-phaser37e4Tvqjz-dq9BU-Q but the method it uses doesn’t work for me. If my TTF file is located at “./fonts/example.ttf”, are there any other ways to load it to the scene? Here is my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phaser Game</title>
    <link rel="preload" as="font" href="../fonts/apl386.ttf" type="font/ttf" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- <script src="phaser.js"></script> -->
    <div
    style="
      font-family: childishFont;
      position: absolute;
      left: -1000px;
      visibility: hidden;
    "
  >
    .
    </div>
    <script defer src="../build/build.js"></script>
</body>
</html>

Here is my CSS file:

@font-face {
    font-family: "childishFont";
    src: url('../fonts/apl386.ttf');
    font-weight: 400;
    font-weight: normal;
}

And here is my JS file:

import Phaser from "phaser";

class GameScene extends Phaser.Scene {
    constructor() {
        super();
    }

    preload() {

    }

    create() {
        this.add.text(100, 100, "Hello World!", { font: "childishFont", fontSize: 100 }),
        console.log("Testing...");
    }
}

const config = {
    type: Phaser.AUTO,
    height: window.innerHeight,
    width: window.innerWidth,
    backgroundColor: "#123456",
    physics: {
        default: "arcade",
        arcade: {
            gravity: {y:0, x:0},
            debug: false
        }
    },
    scene: GameScene,
}

let game = new Phaser.Game(config);
2

Did you try first

<div style="font-family: childishFont">Hello World!</div>

to see if the font appears? And the text code should be

this.add.text(100, 100, "Hello World!", { fontFamily: "childishFont", fontSize: 100 })
3

Ah, so that’s the reason it refused to work. I put font instead of fontFamily :sweat_smile:. Thank you!