How should I load a custom font into my scene?

Hi there, so I’ve encountered a problem when trying to use custom fonts. I tried to follow this tutorial: 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">
    <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">
    <!-- <script src="phaser.js"></script> -->
      font-family: childishFont;
      position: absolute;
      left: -1000px;
      visibility: hidden;
    <script defer src="../build/build.js"></script>

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() {

    preload() {


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

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);

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 })

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