Using Google Fonts In Phaser

Fonts Before Html5

When I was using Flash, fonts could be a real pain. First I had to have the font installed on my computer. Then I had to embed it within the file. This made the file size go up. Back in 2005 when I was making games for the Japanese phone market, this was an issue. We had to keep the files preferably under 50K and in no cases over 100K. Yes, that’s right, the Japanese had flash working on their phones 2 years before the iPhone came out, but that’s another story. What if I didn’t have a font the client wanted? Trying to find the free font that they are in love with, can be quite a chore. I won’t even get into telling you about glyphs and foreign alphabets! It was a nightmare!

Enter Google Fonts!

Now things are so much easier. When a client or artist now asks me about a font I don’t have, I just ask them if we can use a Google font. Usually, the response is, “Let me check!”. Then they go font shopping! So far everyone has font something they like and then they just give me the name of the font and I plug it into Phaser. No downloads, No cost, and no file size increase. The loading time is not really affected if only using a couple of fonts.

Using Google Fonts In Phaser

Here is the code I use for loading a Google Font in Phaser. I place it in a script called fontLoader.js

WebFontConfig = {
google: { families: [font names here] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

To select a font, go to fonts.google.com and look for a font you like.

Then press the add button.

The bar on the bottom of the screen will tell you that you have selected a font family.

Click to expand

Copy the font-family name in this case Baloo Bhai

Copy the font name into your fontLoader.js file

families: [‘Baloo Bhai’]

Here is a working example

First the code

FontLoader.js

WebFontConfig = {
google: { families: ["Fresca","Flamenco","Indie Flower"] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

StateMain.js

var StateMain = {
    preload: function() {},
    create: function() {

        //one second delay to make sure the fonts have loaded
        //9 times out of 10 you won't need this!
    	game.time.events.add(Phaser.Timer.SECOND, this.makeText, this);

    },
    makeText: function() {
        this.text1 = game.add.text(game.width / 2, 100, "Some Text Here");
        this.text1.fill = "#ffffff";
        this.text1.anchor.set(0.5, 0.5);
        this.text1.font = "Fresca";
        //
        //
        this.text2 = game.add.text(game.width / 2, 200, "On Fire!");
        this.text2.fill = "#ff0000";
        this.text2.stroke = "#ffff00";
        this.text2.strokeThickness = 6;
        this.text2.anchor.set(0.5, 0.5);
        this.text2.font = "Flamenco";
        //
        //
        //
        this.text3 = game.add.text(game.width / 2, 300, "Some Text Here");
        this.text3.fill = "#00ff00";
        this.text3.anchor.set(0.5, 0.5);
        this.text3.font = "Indie Flower";
    },
    update: function() {}
}

And the result!

Open in new tab

So get fancy with your text! Add some Google Fonts to your Phaser games!