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); } document.fonts.load('10pt "Amatica SC"').then(renderText);
<h1>Font loading demo</h1> <canvas width="300" height="100"></canvas>
canvas { border: 1px solid black; } @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'); }