Jump to content

Custom Font


Recommended Posts

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() {
      key: 'Boot',
      active: true,
      pack: {
        files: [

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

  preload() {
    // IMPORTANT: below I load google's webfont loader
        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.
      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) {

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.


Link to comment
Share on other sites


  • Recently Browsing   0 members

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