[Tutorial] How to import a custom webfont in Phaser and use fontSquirrel

Jump to the part you need:

Many times I’ve struggled on how to implement custom webfonts in Phaser.
And for custom font I mean fonts different from the Google ones, which can be
loaded from a remote, but also from a local url.

I’ve done it many times right now, and many times I had to go back and check my code,
trying to remember the workflow.

So here I’ll try to write the workflow down, with a couple of different solution,
and with different full working codes as examples,
hoping this will help new Phaser users and as a reference to myself, too 🙂

——————————————————————————————————————————————————-

LOADING FONTS FROM REMOTE URLS:

Phaser Example:

The Phaser official example is cool.
It teaches how to load webfonts and all, using the Google Webfont Loader.
Nice.
But how to load fonts different than the google ones?
Just adding these lanes will do the trick:

custom: {
 families: ['FerrumExtracondensed'],
 urls: ["https://fontlibrary.org/face/ferrum"]
 }

In this case I’ve used the Ferrum Extra Condensed font.
Please, when embedding fonts always be sure that the font is LEGALLY ELEGIBLE for embedding! 🙂

Well, here’s the working example on jsFiddle.

As you can see, both the Google and the Custom fonts are loaded and working.
Cool!

Improving Phaser example:

The Phaser code is good, but not so good, in the end.
As you can see, it has a “strange” workaround: it waits for one second to be sure that the texts are actually loaded.
Well, it’s simple, but ankward, and it does not satisfy me.

So, for more info, I googled for Google Webfont Loader and for its “active” event to find the official documentation.
Adding Phaser as a key word, though, I also found a Phaser custom font tutorial by Casey Leonard.
Please, take a moment to read Casey’s blog post.

So the solution by Casey is simple and strong.
We wait to initialize the game, and we actually setup the whole Phaser engine only AFTER we are sure
that the fonts are loaded.
So after the “active” event.

Here’s the working fiddle for it.

As you can see one more thing differs from the previous example.
WebFontLoader needs to be included within the html.
You can find it here.

So that’s it.
This way you can load your own custom fonts from any remote, and even local url.
But regarding the local url, we have one more solution at our hands.

Thank you Casey for your improvement of Phaser’s example! 🙂

——————————————————————————————————————————————————-

LOADING FONTS FROM LOCAL URLS:

Using the improved Phaser example

To load a webfont from a local url we can, for sure, use the same code as for the remote loading.
I’ve created a gitHub repo for this purpose, so you can check it in action.

As you can see, if you use fontSquirrel (for more info check the guide below), you can simply put everything coming within their “webfontkit” in a folder, let’s call it “fonts”, and load the “stylesheet.css”

custom: {
families: [‘junctionregular’,’ostrich_sansmedium’],
urls: [“fonts/stylesheet.css”]
}

That’s it. In families specify the families from the stylesheet and you are fine.
Same workflow as for the remote loading.

Loading local fonts when OFFLINE

Exactly.
The above examples only works because we are using Google WebFont Loader.
But, obviously it won’t work if we are offline.
It won’t load in the first case, and it cannot be included in the second one.
For sure we can dowload a local copy of the Google WebFont script and distribute it with our project so we could stick to the above examples.
But there is another way, since we are working locally, which will allow us to drop the use of Google WebFont Loader.

USING CSS

If you check other guides online like this generic one, or this more specific to Phaser,

You can see that it’s actually pretty simple, but, we need to use some sort of a hack to force the loading of the fonts.

First of all, we need to link the stylesheet we got from fontSquirrel.
And this is easy.

<link rel=”stylesheet” href=”fonts/stylesheet.css” type=”text/css” charset=”utf-8″ />

Then, to make it work we need to use a trick.
Usually, the trick consists in assigning every font-family to a html tag, to force their loading.
Both the above guides do that.
In our case, we need to do this BEFORE Phaser is initialized, or loaded, and we need to use two tags because we have two different fonts.
Finally, we need to be sure that these mock texts don’t appear, so we move them (using assolute position) outside of the screen, using a <div> tag.

For example, as suggested by the second guide linked above, like this:

<div style=”font-family:ostrich_sansmedium; position:absolute; left:-10000px”>Mock Text for Loading</div>
<div style=”font-family:junctionregular; position:absolute; left:-10000px”>Mock Text for Loading</div>

It sounds hard, but it’s pretty easy!
You can check the code for this implementation here.

See? It’s quite simple.
And, this trick works for any application, Phaser or not.

USING PHASER STATES

But we ARE using Phaser and, if you are using states, you can use another workaround which scheffgames recently posted on html5gamedevs forums.

In this case, in the index file you just need to link the stylesheet, as above:

<link rel=”stylesheet” href=”fonts/stylesheet.css” type=”text/css” charset=”utf-8″ />

Then, in any state BEFORE the state you actually need the fonts, like in a “boot” or “preload” state, you can simply force the font loading by creating two texts using these fonts, like:

var t1 = this.game.add.text(0, 0, “mock text”, {font:”1px junctionregular”, fill:”#FFFFFF”});
t1.visible = false
var t2 = this.game.add.text(0, 0, “mock text”, {font:”1px ostrich_sansmedium”, fill:”#FFFFFF”});
t2.visible = false

Always keeping them invisible or out of screen to be sure they dont’ actually appear.

If you prefere a practice example to the theory, check this other example I’ve created, showing this solution.

Thanks go to the ostraining.com guide and to Lord_Garfield and scheffgames from html5gamedevs.com for their tips and their codes.

——————————————————————————————————————————————————-

ADDITIONAL INFORMATION

NON-ENGLISH LANGUAGES

Hepful tip: if your fonts contain non-english characters like Chinese, Japanese or Cyrillic ones, it may not display correcly.
I’ve struggled to find a solution for this many hours so I want to share it with the world: it is probably and encoding issue.
Yes, it is not displaying correctly probably because your javascript file, is NOT UNICODE!
Change it to unicode encoding and everything should work fine 🙂
scheffgames covered this, too in his recent post, that I wanted to have read one year ago when I encountered this issue for the first time 🙂

HOT TO USE FONTSQUIRREL TO CREATE YOUR OWN WEBFONT & WEBFONTKIT

fontSquirrel’s webFontKit will save you a lot of time, because it will automatically generate all the @font-face setups for you!
Just upload all the fonts you need to use and it will generate a folder with all the fonts and the stylesheet.css ready to be linked from your code.

For all the examples above I’ve used fontSquirrel and these two fonts: Ostric Sans and Junction.
Which I took from here.

Using fontSquirrel is pretty easy:fontSquirrelScreen

Just go to the generator page, upload your fonts and download your kit.
And, once again, please, when embedding fonts always be sure that the font is LEGALLY ELEGIBLE for embedding! 🙂

If you don’t want to use fontSquirrel, you can create your @font-face setup yourself, or use one of the other generators online.
But, the result will be the same, and fontSquirrel is automatic and powerful, so I strongly suggest it! 🙂

BITMAP FONTS INSTEAD OF WEBFONTS

Finally, if you cannot embed the font because of its license, or for other reasons, don’t forget you can switch to BitMap Fonts.
To convert your fonts to BitMap Fonts my favourite tools are bmfont64 when I need something simple and Littera when I need to add some complexity to the fonts, like borders, gradients and shadows.

The Phaser official guide on BitMap fonts has all the information you need.

——————————————————————————————————————————————————-

FINAL NOTES

So, here are different solutions about how to import a custom webfont in Phaser, along with some useful tips.
During the years I’ve used them all, depending on my needs and on the client or platform limitations.

As I said before, I’ve written this guide, listing all the tools that I use and linking all the references to other devs codes and tips, as a practical reference for new users, facing these problems for the first time, but also as a future reference for myself.

That’s why I’ve attached a source code for every example, for having them ready to be used as templates and code bases. Hoping to simplify the reader’s life 🙂

You can find all the source code of this tutorial here.

Thanks for reading!
Cheers!

Leave a Reply

%d bloggers like this: