How to load font in phaser?

[rossi46]

How to load font in Phaser. 

I use:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,vietnamese" rel="stylesheet">

and in css, i load:

@font-face { font-family: 'Prophit'; src: url("../fonts/V5ProphitDot.eot?#iefix") format("embedded-opentype"), url("../fonts/V5ProphitDot.woff") format("woff"), url("../fonts/V5ProphitDot.ttf") format("truetype"), url("../fonts/V5ProphitDot.svg#V5ProphitDot") format("svg"); font-weight: normal; font-style: normal; }

in game, i create:

this.textJackpot = this.add.text(this.world.centerX, 24, "0", { font: "42px 'Prophit'", fill: "#fff600", align: "center" });
this.textBalance = this.add.text(this.world.centerX, 24, "0", { font: "42px 'Roboto'", fill: "#fff600", align: "center" });

 

but It do not work???? How to load it????

[Alexalten]

Hi, You can find a small example in this script: http://www.magratheaworks.net/RPG/messages_collection/index.html

check the code of index.html (where the fonts are "called") and the code of http://www.magratheaworks.net/RPG/messages_collection/js/Game.js

 

Bye,

Alex

[rossi46]

1 hour ago, Alexalten said:

Hi, You can find a small example in this script: http://www.magratheaworks.net/RPG/messages_collection/index.html

check the code of index.html (where the fonts are "called") and the code of http://www.magratheaworks.net/RPG/messages_collection/js/Game.js

 

Bye,

Alex

Thanks I run this example. it work, but when i set i on my project, some time it not load font???  It use " time new roman". I don't understand 

[Alexalten]

Hi, I think that's due to the use of this specific font. I explain: this font it's not always available for all operating system (on Linux, for example, You have to install it separately).

I suggest You to search on Google fonts (https://fonts.google.com/) the most similar to "time new roman".

Could this be a solution for You?

Bye,

Alex

[Taggrin]

I experienced this problem before as well. You defined everything correctly as far as I can see. I noticed that sometimes the game cannot find the font when they are not loaded (read: used) at an earlier stage in your HTML file. What I do with my games is that in the HTML page where the game is played I write down a dash with a huge offset and visibility set to hidden so the font is forced to load before the game starts, while keeping this loader invisible to not mess up the page. For me this fixes the problem.

So just above the game I have in my HTML page (for example font Squares defined in at fontface):

<div class="fontLoader" style="font-family: Squares;">-</div>

In CSS:

.fontLoader {
   position: absolute;
   left: -1000px;
   visibility: hidden;
}

 

[rossi46]

20 hours ago, Taggrin said:

I experienced this problem before as well. You defined everything correctly as far as I can see. I noticed that sometimes the game cannot find the font when they are not loaded (read: used) at an earlier stage in your HTML file. What I do with my games is that in the HTML page where the game is played I write down a dash with a huge offset and visibility set to hidden so the font is forced to load before the game starts, while keeping this loader invisible to not mess up the page. For me this fixes the problem.

So just above the game I have in my HTML page (for example font Squares defined in at fontface):

<div class="fontLoader" style="font-family: Squares;">-</div>

In CSS:

.fontLoader {
   position: absolute;
   left: -1000px;
   visibility: hidden;
}

 

Thanks i will try it.

[Towelie]

I've tried the dash solution but it only seems to work in Internet explorer and Edge, any reason it wouldn't in Chrome and Firefox?

[CaioMGA]

On 2016-8-26 at 8:52 AM, Taggrin said:

I experienced this problem before as well. You defined everything correctly as far as I can see. I noticed that sometimes the game cannot find the font when they are not loaded (read: used) at an earlier stage in your HTML file. What I do with my games is that in the HTML page where the game is played I write down a dash with a huge offset and visibility set to hidden so the font is forced to load before the game starts, while keeping this loader invisible to not mess up the page. For me this fixes the problem.

So just above the game I have in my HTML page (for example font Squares defined in at fontface):

<div class="fontLoader" style="font-family: Squares;">-</div>

In CSS:

.fontLoader {
   position: absolute;
   left: -1000px;
   visibility: hidden;
}

 

THIS!

Thanks a lot

[buzzb0x]

Hello there,

In order to load your fonts, you can use the WebFont loader script provided by Google. My method makes it so that you're sure fonts are loaded before going to the next state and keeps your HTML clean. I use babel to write with ES6. Have a preloader state which looks like this:

 

export default class Preloader extends Phaser.State {

  constructor() {
    super();
    this.asset = null;
    this.ready = false;
    this.fontsReady = false;
  }

  preload() {
    // setup loading bar
    this.asset = this.add.sprite(this.game.width * 0.5 - 110, this.game.height * 0.5 - 10, 'preloader');
    this.load.setPreloadSprite(this.asset);

    // setup loading and its events
    this.load.onLoadComplete.addOnce(this.onLoadComplete, this);
    this.loadResources();
  }

  update() {
    if (this.ready && this.fontsReady)
      this.game.state.start('menu');
  }

  fontIsReady() {
    console.log('Fonts Loaded')
    this.fontsReady = true;
  }

  loadResources() {
    // load your resources here
    
    const WebFontConfig = {
        active: this.fontIsReady.bind(this), // The bind(this) ensures that the method will be used with your Phaser Game as context
        google: {
            families: ['Nunito', 'Itim']
        }
    };
    this.load.script('webfont',
        "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        () => WebFont.load(WebFontConfig));

    // Load your assets here
  }

  onLoadComplete() {
    console.log('Assets Ready');
    this.ready = true;
  }
}