How to fix drawing text to canvas with @font-face does not work the first time with HTML and CSS?

Spread the love

Sometimes, we want to fix drawing text to canvas with @font-face does not work the first time with HTML and CSS.

In this article, we’ll look at how to fix drawing text to canvas with @font-face does not work the first time with HTML and CSS.

To fix drawing text to canvas with @font-face does not work the first time with HTML, we load the font before drawing on the canvas.

For instance, we write

<body>
  <div id="preloadfont">.</div>
  <canvas id="yourcanvas"></canvas>
  ...
</body>

to add a div.

Then we write

#preloadfont {
  font-family: YourFont;
  opacity: 0;
  height: 0;
  width: 0;
  display: inline-block;
}

to set the div to load the font by setting the font-family to the font we want to render.

To fix drawing text to canvas with @font-face does not work the first time with HTML and CSS, we load the font before drawing on the canvas.