Canvas with Font Face example

index.ts

const fontUrl = 'https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Of2_ROW-AJi8SJQt.woff'
const robotoFont = new FontFace('Roboto Mono', `url(${fontUrl})`);

// Canvas variables
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

robotoFont.load().then((font: FontFace) => {
  // This is REQUIRED
  document.fonts.add(font);

  // Using the font
  ctx.font = `30px '${font.family}'`;
  ctx.fillText("Hello World!", 10, 50);
});