Phaser CSS fonts broke by update

[Reubencovington]

I recently updated the phaser.min file from v2.0.1 to v2.4.6 and now my CSS based fonts simply don't work.

Here is a snippet of how I loaded the fonts previously

<style type="text/css">
      @font-face {
         font-family: gemFont;
         src: url(gem2.woff);
      }
</style>

And here is how I use the fonts in Phaser

   inventoryButtonText = MetropolisGame.game.add.text(
      -15,
      0,
      "Inventory",
      { font: 'gemFont', fill: "#FFF", align: "left" }
   );

I don't get any errors in the console it just seems to change the text to a different default font.

[drhayes]

I know there are some headaches around when web fonts are *actually* ready to render. As in, the browser *says* it's downloaded the font but, in reality, it's not ready for use in canvas. I've seen a variety of workarounds here:

1. Wait one second before drawing the text.

2. Made a hidden <p> tag that uses the font before the <canvas> element to "convince" the browser to use the font. (you should probably try this one)

¯\_(ツ)_/¯ I wish I had definitive answers here.

[Fractal Games]

You can try the following:

Inside your CSS:

@font-face{
    font-family:'Montserrat-Regular';
    font-style:normal;
    src:url(GraphicUtils/Montserrat-Regular.ttf);
}

#bug-fixer{
    font-family:"Montserrat-Regular";
    visibility:hidden;
}

Where bug-fixer is the following div inside your html:

<div id="bug-fixer">.</div>

Put some text in the bug fixer or a dot in this case. It won't be visible but will load your font properly.

 

I also see here    font-family: gemFont;  that your font name is not given as a string in quotes.

 

You can also see it in detail here: https://youtu.be/1o55_seD2Q4?t=1h12m

I hope that helps

 

 

[VitaZheltyakov]

As said above, the fonts should be ready for display.

Use in boot state:

this.textLoad = this.add.text(game.world.centerX, game.world.centerY, ".", { font: "8px Montserrat-Regular", fill: "#070707"});
		this.textLoad.alpha = 0;