การวาดข้อความบน HTML5 <canvas> ด้วย @font-face ไม่ทำงานครั้งแรก

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