Fonts Before Html5<\/h3>\n

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. \u00a0Yes, that’s right, the Japanese had flash working on their phones 2 years before the iPhone\u00a0came 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!<\/p>\n

Enter Google Fonts!<\/h3>\n

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.<\/p>\n

Using Google Fonts In Phaser<\/h3>\n

Here is the code I use for loading a Google Font in Phaser. I place it in a script called fontLoader.js<\/p>\n

WebFontConfig = {\r\ngoogle: { families: [font names here] }\r\n};\r\n(function() {\r\nvar wf = document.createElement('script');\r\nwf.src = ('https:' == document.location.protocol ? 'https' : 'http') +\r\n':\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js';\r\nwf.type = 'text\/javascript';\r\nwf.async = 'true';\r\nvar s = document.getElementsByTagName('script')[0];\r\ns.parentNode.insertBefore(wf, s);\r\n})();<\/pre>\n
To select a font, go to fonts.google.com and look for a font you like.<\/p>\n
Then press the add button.<\/p>\n
<\/p>\n
The bar on the bottom of the screen will tell you that you have selected a font family.<\/p>\n
Click to expand<\/p>\n
<\/p>\n
Copy the font-family name in this case Baloo Bhai<\/p>\n
<\/p>\n
Copy the font name into your fontLoader.js file<\/p>\n
families: [‘Baloo Bhai’]\n
Here is a working example<\/p>\n
First the code<\/p>\n
FontLoader.js<\/p>\n
WebFontConfig = {\r\ngoogle: { families: [\"Fresca\",\"Flamenco\",\"Indie Flower\"] }\r\n};\r\n(function() {\r\nvar wf = document.createElement('script');\r\nwf.src = ('https:' == document.location.protocol ? 'https' : 'http') +\r\n':\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js';\r\nwf.type = 'text\/javascript';\r\nwf.async = 'true';\r\nvar s = document.getElementsByTagName('script')[0];\r\ns.parentNode.insertBefore(wf, s);\r\n})();<\/pre>\n
StateMain.js<\/p>\n
var StateMain = {\r\n    preload: function() {},\r\n    create: function() {\r\n\r\n        \/\/one second delay to make sure the fonts have loaded\r\n        \/\/9 times out of 10 you won't need this!\r\n    \tgame.time.events.add(Phaser.Timer.SECOND, this.makeText, this);\r\n\r\n    },\r\n    makeText: function() {\r\n        this.text1 = game.add.text(game.width \/ 2, 100, \"Some Text Here\");\r\n        this.text1.fill = \"#ffffff\";\r\n        this.text1.anchor.set(0.5, 0.5);\r\n        this.text1.font = \"Fresca\";\r\n        \/\/\r\n        \/\/\r\n        this.text2 = game.add.text(game.width \/ 2, 200, \"On Fire!\");\r\n        this.text2.fill = \"#ff0000\";\r\n        this.text2.stroke = \"#ffff00\";\r\n        this.text2.strokeThickness = 6;\r\n        this.text2.anchor.set(0.5, 0.5);\r\n        this.text2.font = \"Flamenco\";\r\n        \/\/\r\n        \/\/\r\n        \/\/\r\n        this.text3 = game.add.text(game.width \/ 2, 300, \"Some Text Here\");\r\n        this.text3.fill = \"#00ff00\";\r\n        this.text3.anchor.set(0.5, 0.5);\r\n        this.text3.font = \"Indie Flower\";\r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
And the result!<\/p>\n\n\n