Edit in JSFiddle

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

let font = new FontFaceObserver('Amatica SC');
font.load().then(renderText);

<canvas width="300" height="100"></canvas>

@font-face {
  font-family: 'Amatica SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatica SC'), url(https://fonts.gstatic.com/s/amaticasc/v1/r4IyjqPgTL10SERuDuUzpAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
}

canvas {
  border: 1px solid black;
}