Google Font Integration With Phaser

In the previous post about Using Google Fonts in HTML5 Games, we talked about how using Google Fonts would make it easier to provide translation of in-game text to different regions. Now, I’ll show you what code to use within your HTML code and Phaser. First, lets visit Google Fonts www.google.com/fonts

Next, choose your font that you would like to use inside you game. Please limit this to 1 or 2 as loading times will be affected by using too many fonts. If you can get away with using one, that’s the best solution.

Once you’ve chosen your font, you’ll notice a big blue “Add to Collection” button. To the left of that button is a couple more icons. The Box with the arrow pointing right is the one we want to choose. When you hover over it, the Quick Tool Tip says “Quick Use”.

The Quick Use page is split into 4 different sections. We need to go to the 3rd section and where the tabs are, choose the last tab called Javascript. Here’s the code we used for our upcoming game Space Agent which uses the font Orbitron:

<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Orbitron:700:latin’ ] }
};
(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);
})();
</script>

Place that code within your HEAD section of your HTML file to load the font before the game even loads. This will allow you to use it on your Preloader screen if you need to.

That’s the HTML section done. Next is the code for use within the Phaser Javascript files. The property we want to use is this.add.text()

Here’s a breakdown of what goes inside:

this.add.text(x-position, y-postion, “TEXT TO\nDISPLAY”, {
font: “30px Orbitron”,
align: “center”,
fill: “#fff”,
stroke: “#ccc”,
strokeThickness: 2
});

• x-position is the vertical. 0 is top of screen
• y-position is the horizontal. 0 is the left of the screen
• TEXT TO DISPLAY is pretty straight forward. \n is the regex for NEW LINE. Just make sure everything is within the Quotation Marks.
• The Curly Brackets hold the information about the font to use, size, alignment, fill colour, stroke, and stroke thickness. Leave out anything you don’t require.

 

Here’s an example that we’ve used in our HTML5 game Space Agent.

this.add.text(70, 380, “TOUCH TO\nSTART”, {font: “30px Orbitron”, align:”center”, fill:”#fff”});

We can go from here and change the TEXT TO DISPLAY to a variable that is then linked to different languages. This is how to make you game use Google Fonts and prepare yourself for Multi Language HTML5 Games.

As an un-optimised example would have it of different languages:

engTxtStart = “TOUCH TO START”
spaTxtStart = “TOQUE PARA EMPEZAR”
freTxtStart = “TOUCHEZ POUR DÉMARRER”

The rest is up to you. Now go forth and make HTML5 Games the world can be proud of. If you are looking to Buy HTML5 Games from Souzou, want to join our team or have a suggestion then please contact us or leave a comment below.

Share this post: on Twitter on Facebook on Google+