@fontface के साथ HTML5 <कैनवास> पर टेक्स्ट ड्रा करना पहली बार में काम नहीं करता है

किसी टाइपफेस के साथ कैनवास में टेक्स्ट बनाना जो @font-face के माध्यम से लोड किया गया है, पहले टेक्स्ट को सही ढंग से नहीं दिखाता है। ऐसा इसलिए है क्योंकि ब्राउज़र ने अभी तक नेटवर्क से फ़ॉन्ट लोड नहीं किया है। इसलिए, यह पहले से उपलब्ध फ़ॉन्ट का उपयोग करता है।

उपयोग करने से पहले फ़ॉन्ट को लोड करना पूरा करना होगा। यह

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

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