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>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>

JavaScript

//code base:
//https://phaser.io/examples/v2/text/google-webfonts

//
//and this second example avoids the use 1 second wait by loading google webfont js directly and just running the whole game AFTER the font loading is complete.
//I took it from Casey Leonard 
//http://thoughts.amphibian.com/2015/08/custom-fonts-with-phaser.html

webFontLoading = {

  active: function() {
		runGame()
  },

  google: {
    families: ['Revalia']
  },
  custom: {
    families: ['FerrumExtracondensed'],
    urls: ["https://fontlibrary.org/face/ferrum"]
  }
};

WebFont.load(webFontLoading);

var runGame = function(){

var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'phaser-example', {
  create: create
});



function create() {

  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);

}

}