Drawing text in HTML5 using @fontface doesn't work first time

Drawing text in the canvas using a font loaded via @font-face does not display the text correctly at first. This is because the browser hasn't loaded the font from the network yet. Therefore, it uses fonts that are already available.

Fonts must be loaded before use. This can be ensured using the tag. If you want to make sure that the font is available and some other elements are preloaded, then you can do this using the tag like this

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

You can also load the 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!');  
});                  

The above is the detailed content of Drawing text in HTML5 using @fontface doesn't work first time. For more information, please follow other related articles on the PHP Chinese website!