@font-face দিয়ে লোড করা একটি টাইপফেস দিয়ে ক্যানভাসে টেক্সট আঁকলে প্রথমবার টেক্সট সঠিকভাবে দেখায় না। কারণ ব্রাউজার এখনো নেটওয়ার্ক থেকে ফন্ট লোড করতে পারেনি। তাই সেটি ইতিমধ্যে উপলব্ধ ফন্টটি ব্যবহার করে।
ফন্টটি পুরোপুরি লোড হওয়ার আগে ব্যবহার করা যাবে না। এটি নিশ্চিত করতে <div> ট্যাগ ব্যবহার করা যায়। আপনি যদি নিশ্চিত করতে চান যে ফন্টটি উপলব্ধ আছে এবং অন্যান্য এলিমেন্ট প্রিলোড করা আছে, তবে <div> ট্যাগ ব্যবহার করে নিচের মত করে করতে পারেন:
<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!'); });
