Drawing text to HTML5 with @fontface does not work at the first time

 Drawing text in a canvas with a typeface that is loaded via @font-face does not show text correctly at first. This is because the browser has not yet loaded the font from network. Therefore, it makes use of the font, which is already available.

The font has to be completed loaded before it is used. This can be ensured using <div> tag. If you want to make sure that the font is available and have some other elements preloaded, then you can do this by using the <div> tag as under

<div style="font-family: PressStart;"></div>  

You can also load font like this −

var newFont = new FontFace(‘New Font', 'url(https://samplefont.woff2)');  
newFont.load().then(function(font){  
   document.fonts.add(font);  
   alert('Font successfully loaded!');  
});