JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body bgcolor=white>
<canvas id="myCanvas" width="400" height="200"
style="border:1px solid #d3d3d3;">no support</canvas>
<style>
  canvas{
    width: 200px;
    height: 100px;
  }
</style>
<script>
const myFont = new FontFace('asd', 'url(https://fonts.gstatic.com/s/vastshadow/v7/vUwwSAve1had6QNw3_7lJYgp9Q8gbYrhqGlRav_IXfk.woff2)');

myFont.load().then(() => {
  
  
  var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d",{alpha: false});
ctx.fillStyle='white'
ctx.fillRect(0,0,500,500)
document.fonts.add(myFont);
ctx.fillStyle='black'
ctx.font = "60px asd"; 
ctx.fillText("Hdello World",20.5,100.5);


});



</script>
<span style="font-family:asd;font-size:30px">Hdello World</span>
</body>
</html>