js canvas text custom font
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<p>to use external fonts you must have them linked to the dom</p>
<canvas id="c" width="500" height="300"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.font = "40px Roboto";//notice that behind the px comes the font family name
ctx.fillText("hello world",40,40);
</script>
</body>
</html>