JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.24/webfontloader.js"></script>
<canvas width="300" height="100"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const FONT_NAME = 'Amatica SC';

function renderText() {
	  let ctx = document.querySelector('canvas').getContext('2d');
    ctx.font = `48px "${FONT_NAME}"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Waka Waka', 150, 50);
}

WebFont.load({
		google: {families: [FONT_NAME]},
  	active: renderText
});