Vẽ văn bản trong canvas với kiểu chữ được tải qua @ font-face ban đầu không hiển thị văn bản một cách chính xác. Điều này là do trình duyệt chưa tải phông chữ từ mạng. Do đó, nó sử dụng phông chữ đã có sẵn.
Phông chữ phải được tải xong trước khi được sử dụng. Điều này có thể được đảm bảo bằng cách sử dụng thẻ
. Nếu bạn muốn đảm bảo rằng phông chữ có sẵn và có một số phần tử khác được tải trước, thì bạn có thể thực hiện việc này bằng cách sử dụng thẻ
như bên dưới
<div style="font-family: PressStart;"></div>
Bạn cũng có thể tải phông chữ như thế này -
var newFont = new FontFace(‘New Font', 'url(https://samplefont.woff2)');
newFont.load().then(function(font){
document.fonts.add(font);
alert('Font successfully loaded!');
});