การวาดข้อความในแคนวาสด้วยแบบอักษรที่โหลดผ่าน @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!');
}); 