Loading fonts in Phaser 3 not working

Phaser 3
1

I’m trying to load my font (Dogica Pixel) into my game. I have a .ttf file at the path shown, but whenever I start the game, it just draws the text with the Times New Roman font (default).
Here is my index.html:
`

Phaser Game 
<style media='screen' type='text/css'>
    @font-face {
        font-family: 'dogica';
        src: url('assets/dogica/dogicapixel.ttf');
        font-weight: 400;
        font-weight: normal;
    }
    .fontPreload {
	  	font-family: 'Tangerine';
	  	position:absolute;
	  	left:-100px;
	}
</style>
Dogica
`

And my game.js:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create
}
};

var game = new Phaser.Game(config);

function preload () {}

function create () {
this.add.text(200, 100, ‘Snekrun!’, {fontFamily: ‘dogica’});
}

Any help?

2

Refer to this article for more info on web font preloading in HTML5 games.

Check this examples (example 1, example 2) and this rex note/plugin.

1 Like
3

Probably best to use something like webfontloader, as in game-objects/text/custom-webfont.

1 Like
4

I had the same issue, but I found a workaround that didn’t require loading the fonts explicitly in Javascript. For my fonts to work, I had to take the additional step of adding an invisible element to my html that uses the custom font, i.e. something like:

<div style="font-family: dogica; visibility: hidden">
    .
</div>

I picked this up from a tutorial somewhere, but for the life of me I don’t remember where or I would link it. Basically from what I understand, css fonts aren’t explicitly loaded until they’re actually needed or something like that.

2 Likes