FabricJs Tutorial : Canvas Doesn't Render Custom WebFont

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <div id="loading" class="overlay">
      <div>
        <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif">
      </div>
    </div>
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">FabricJs</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" style="padding: 0px;width: 100%;">
      <div class="starter-template">
	      <div class="row" style="padding:0px">
	      	<div class="col-md-12 col-sm-12">
	      		<canvas width="500" height="300" id="canvas"></canvas>
	      	</div>
	      </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  	<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
  	<script src="script.js"></script>
  </body>
</html>

    var canvas = new fabric.Canvas("canvas");
    canvas.backgroundColor = '#ddd';
    canvas.renderAll();
    
    function addText(){
      return function(){
        var style1 = new fabric.Text("Webfont : Righteous", { 
            fontFamily: "Righteous", 
            left: 50,
            top: 30,
            fontSize: 20,
            fill: '#000',
        });
        canvas.add(style1);
        var style2 = new fabric.Text("Webfont : Courgette", { 
            fontFamily: "Courgette", 
            left: 50,
            top: 130,
            fontSize: 20,
            fill: '#000',
        });
        canvas.add(style2);
        var style3 = new fabric.Text("Webfont : Aldrich", { 
            fontFamily: "Aldrich", 
            left: 50,
            top: 230,
            fontSize: 20,
            fill: '#000',
        });
        canvas.add(style3);
        canvas.renderAll();
        $("#loading").fadeOut();
      }
    }
    
    WebFont.load({
      google : {
          families : [
              'Righteous',
              'Courgette',
              'Aldrich'
         ]
      },
      active : addText(),
      loading : function(){
          $("#loading").show();
      }
    });

/* Styles go here */
canvas{
  border: 1px solid #000;
}
div.overlay {
  display:        table;
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  z-index:        999;
}
div.overlay > div {
  display:        table-cell;
  width:          100%;
  height:         100%;
  background:     #fff;
  text-align:     center;
  vertical-align: middle;
}