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

WebFont.load({
  google: {
    families: ['Gloria Hallelujah']
  },
  active: function() {
    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext('2d');

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