Check out example codes for "js canvas text font". It will help you in understanding the concepts better.

Code Example 1

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&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>

Learn ReactJs, React Native from akashmittal.com