Using Webfonts

Phaser 3
1

Hi,

I have been reading various examples online, but I am having difficulty understanding how I use a web font in a scene. For example, my scene class looks as below, but the font just seems to display as default “times-new-roman”. Can someone advise on the simplest way to do this?

var StartScreen = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:
    function StartScreen() {
        Phaser.Scene.call(this, { key: 'StartScreen' })
    },

    preload: function ()
    {
        this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js');
    },


    create: function ()
    {

        WebFont.load({
            google: {
                families: [ 'Freckle Face', 'Finger Paint', 'Nosifer' ]
            },
        });
        this.add.text(260, 440, 'Hello World!', { fontFamily: 'Finger Paint', fontSize: 20, color: '#ffffff' });
    }

});
2

Look at the Custom Webfont example. You cannot use a webfont until it has loaded.

3

@Telinc1 Many thanks, that explained it to me, got it working now.

1 Like