Loading oft and ttf files in phaser3

Phaser 3
1

Does anyone know how to load otf and ttf files for custom font? I would appreciate any help. I’m using webpack6 but I dont think that matters too much.

2

I just finished working on this part, please refer to the 1st answer here: https://stackoverflow.com/questions/51217147/how-to-use-a-local-font-in-phaser-3

1 Like
3

I followed that SE post before I found this one, but I only get Times font . . . which clearly means that it’s trying to do the font load, but it isn’t completing.

side question: in my code below, the fonts sit at ./src/assets/font . . . is that correct? I couldn’t find a confirmation of this anywhere, as /public/assets/font would seem to make more sense, but that doesn’t work either.

Here’s my html and then the use. The result is “TEXT HERE” in green, but not the intended font

Did I miss something?

<head>
	<title>[fantasy trader] game</title>
	<style media='screen' type='text/css'>
		@font-face {
			font-family: "TypeReg";
			src: url('assets/font/1980v202002.ttf');
		}

		@font-face {
			font-family: "TypeBold";
			src: url('assets/font/1980v202004.ttf');
		}
	</style>
</head>

<body id="phaser-game">
	<script src="main.js"></script>
	<div style="font-family:'TypeReg'; display: none;">TypeReg</div>
	<div style="font-family:'TypeBold'; display: none;">TypeBold</div>
</body>

let text = this.add.text(50, 50, 'TEXT HERE', { fontFamily: 'TypeReg', fill: '#00ff00' });
4

I found the problem . . . in my HTML block, main.js needs to be after the fonts.

No errors, no problems, just out of order.