किसी टाइपफेस के साथ कैनवास में टेक्स्ट बनाना जो @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!');
});