JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html><body bgcolor=white>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">no support</canvas>

<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 = "30px asd"; 
ctx.fillText("Hdello World",10.5,50.5);


});



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