Adding Custom Fonts in Phaser

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

You can download free fonts in ttf format from You can convert the ttf to fnt or png formats using the web application
Load the font in your HTML or CSS

    @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;
  <span id="preload-font"></span>

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
  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 *