JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<canvas id="c" width="400" height="130">
  <p>No canvas.</p>
</canvas>

CSS

body {
  background: #cccccc;
}

#c {
  display: block;
  margin: 10px auto;
  background: white;
}

JavaScript

$('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" media="all">').appendTo('head');

var deferred = $.Deferred();
document.fonts.load('100px Gloria Hallelujah').then(function() {
  deferred.resolve();
});

deferred.done(function() {
  var canvas = document.getElementsByTagName("canvas")[0];
  var ctx = canvas.getContext('2d');

  ctx.font = "40px 'Gloria Hallelujah'";
  ctx.fillText("Gloria Hallelujah", 10, 85);
});