Phaser custom font loading

Custom font loading tutorial, using Phaser basic Google Webfont example.

HTML

<link rel="stylesheet" href="https://fontlibrary.org/en/font/ferrum.css">
<script src="https://github.com/photonstorm/phaser/releases/download/v2.6.2/phaser.min.js"></script>

JavaScript

//code base:
//https://phaser.io/examples/v2/text/google-webfonts
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'phaser-example', {
  preload: preload,
  create: create
});

//  The Google WebFont Loader will look for this object, so create it before loading the script.
WebFontConfig = {
	
  //  'active' means all requested fonts have finished loading
  //  We set a 1 second delay before calling 'createText'.
  //  For some reason if we don't the browser cannot render the text the first time it's created.
  active: function() {
 game.time.events.add(Phaser.Timer.SECOND, createText, this);
  },

  //  The Google Fonts we want to load (specify as many as you like in the array)
  google: {
    families: ['Revalia']
  },
  custom: {
    families: ['FerrumExtracondensed'],
    urls: ["https://fontlibrary.org/face/ferrum"]
  }
  //free font from fontlibrary
  //https://fontlibrary.org/en/font/ferrum
  //
  //url can be a local url, link to your custom css generated from a font, from fontSquirrel for example!
  //https://www.fontsquirrel.com/tools/webfont-generator
  //just be sure that the font is LEGALLY ELEGIBLE for embedding! :)

};

function preload() {

  //  Load the Google WebFont Loader script
  game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');

}


function create() {

  game.stage.setBackgroundColor(0x2d2d2d);

}

function createText() {

  var style = {
    font: "15px Revalia",
    fill: "#fff",
    boundsAlignH: "center",
    boundsAlignV: "middle"
  };
  
  var style2 = {
    font: "25px FerrumExtracondensed",
    fill: "#fff",
    boundsAlignH: "center",
    boundsAlignV: "middle"
  };

  //  The Text is positioned at 0, 100
  var text = game.add.text(50, 100, "Revalia Google Font", style);
  text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2);
  
  var text2 = game.add.text(50, 200, "Ferrum Custom Font", style2);
  text2.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2);

}