Jump to content

Phaser CSS fonts broke by update


Recommended Posts

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);

And here is how I use the fonts in Phaser

   inventoryButtonText = MetropolisGame.game.add.text(
      { 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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

You can try the following:

Inside your CSS:



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 :)



Link to comment
Share on other sites


  • Recently Browsing   0 members

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