Adding Custom Fonts in Phaser

Obtain the ttf, fnt, and png formats of the font

You can download free fonts in ttf format from http://dafont.com. You can convert the ttf to fnt or png formats using the web application http://kvazars.com/littera/.
Load the font in your HTML or CSS

<head>
  <style>
    @font-face {
      font-family: 'dimbo'; src: url('assets/fonts/dimbo-regular.ttf');
    }
    * {
      margin: 0;
      padding: 0;
      font-family: 'dimbo', sans-serif;
    }
    #game_div {
      margin: auto;
      background: #000;
    }
    #preload-font {
      font-family: 'dimbo', sans-serif;
      text-indent: -9999px;
      font-size: 0;
    }
  </style>
</head>
<body>
  <span id="preload-font"></span>
</body>

Preload the font in your JS code

preload : function() {
  game.load.bitmapFont('dimbo', 'assets/fonts/dimbo.png', 'assets/fonts/dimbo.fnt');
}

Add the text to the screen

this.game.add.text(
  10, // x
  10, // y
  'Test', // text
  { // font, style, alignment
    font: "14px dimbo",
    fill: '#ff0000',
    align: 'center'
  }
);

Leave a Reply

Your email address will not be published. Required fields are marked *