Jump to content

How to use fontsquirrel with Phaser


Recommended Posts

Using webfonts for Phaser is the same as using webfonts for any canvas based application.


First you include your webfont references (in this case a Google Font):

<link href='http://fonts.googleapis.com/css?family=Almendra' rel='stylesheet' type='text/css'>

then you can refer to it by font-family:

font-family: 'Almendra', serif;

If you are using web fonts with a canvas you'll likely have to do a sort of 'pre-load' of your fonts to have them appear the first time.


What I did was create a class that would render, but wouldn't appear onscreen:

.fontPreload{    position:absolute;    left:-100px;}

and be sure to include the CSS references to your fonts as well with whatever code fontsquirrel or Google fonts might provide.


then you can add something like this anywhere on the page:

<div class="fontPreload" style="font-family: Almendra SC;">.</div>

That way your fonts will appear as soon as your canvas is rendered (otherwise you'd have a default font style then it would use the webfont after the first update).


Then you're ready to render the text in Phaser with whatever CSS class you created for your webfont

//text...var text = "Coins: "+coins;var style = { font: "24px Almendra SC", fill: "#ff0044", align: "center" };var t = game.add.text(10, 0, text, style);

Hope this helps!

Link to comment
Share on other sites

Hey Jeff,


Just wanted to say thanks for your response, I've spent all day messing with webfonts in Phaser and yours is the only solution I could get to work. Cheers!


EDIT: Actually, instead of your first step, in my CSS I did:

@font-face {  font-family: "PostinoStd";  src: url('assets/font/PostinoStd.ttf') format("truetype");}
Link to comment
Share on other sites

  • 2 years later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...