Custom Font

[andrei.nicolae]

Hi,

I want to use a font that I have installed locally on my computer in the game. Can someone help?

Thank you.

[prob]

You can convert it to a bitmap font (which you can do online here) and add it as a Bitmaptext object.

[fielding]

First time posting, so be gentle ? 

@andrei.nicolae I think the easiest way to explain would be to show you how I have done it. I've included a stripped down version of the Boot.js file I am using in my current project.

class Boot extends Phaser.Scene {
  constructor() {
    super({
      key: 'Boot',
      active: true,
      pack: {
        files: [
         //INSERT SOME FANCY FILES 
        ],
      },
    });

    this.progress = 0;
    this.loaded = false;
  }

  preload() {
    // IMPORTANT: below I load google's webfont loader
    this.load
      .script('https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont')
      .setPath('assets/img/')
      .image({
        key: 'foo',
        url: 'foo.png',
      })

    this.load.on('progress', this.onLoadProgress, this);
    this.load.on('complete', this.onLoadComplete, this);
  }

  onLoadProgress(progress) {
    console.debug(`${Math.round(progress * 100)}%`);
  }

  onLoadComplete(loader, totalComplete, totalFailed) {
    // IMPORTANT: Here we utilize the webfonts loader script we loaded above.
    // NOTE: I played around with calling this in different places and settled
    // on this one currently. Feel free to play around with where it is called.
    // just make sure that you do not call it before it is done loading and also
    // make sure not to proceed to a scene that needs the font before it renders.
    WebFont.load({
      active: () => this.loaded = true,
      custom: {
        families: ['Montserrat'],
        urls: ['assets/fonts/Montserrat.css'], //I included what this should look like below
      },
    });
    console.debug('completed: ', totalComplete);
    console.debug('failed: ', totalFailed);
  }

  update() {
    if (this.loaded) {
      this.scene.launch('Clouds');
      this.scene.start('Title');
    }
  }
}

export default Boot;

 

Like I mentioned in the above comments, here is the accompanying css file.

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('Montserrat-Regular.eot');
  src: url('Montserrat-Regular.woff2') format('woff2'),
       url('Montserrat-Regular.woff') format('woff'),
       url('Montserrat-Regular.ttf') format('truetype'),
       url('Montserrat-Regular.svg#Montserrat-Regular') format('svg'),
       url('Montserrat-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

 

Hopefully, the comments alone are sufficient. If not then the file I stripped down is here in it's ever-changing (work in progress) form: https://github.com/fielding/trouser-snake/blob/master/src/scenes/Boot.js.  The game has a long way to go, so no judging haha ? If code/examples aren't your way of learning and you have any questions let me know.