HTML5 Canvasで@font-faceのWebフォントが最初に正しく表示されない原因と解決策

問題：Canvasに描画したテキストが意図したフォントにならない

HTML5の<canvas>で、@font-faceによって読み込んだWebフォントを使ってテキストを描画すると、最初はそのフォントで表示されないことがあります。

これは、ブラウザがまだネットワークからのフォントのダウンロードを完了していないためです。Canvasへの描画はスクリプト実行時点で即座に行われるため、ブラウザはその瞬間に利用可能な別のフォント（フォールバックフォント）を使用してしまいます。

つまり、フォントは完全に読み込まれてから使用される必要があります。以下に代表的な解決策を紹介します。

解決策1：divタグでフォントを事前に読み込む（プリロード）

最もシンプルな方法は、対象のフォントを指定した空の<div>要素をページ内に配置しておくことです。これにより、ブラウザがそのフォントを事前にダウンロードします。他の要素もまとめてプリロードしておきたい場合にも有効です。

<div style="font-family: PressStart;"></div>

解決策2：FontFace APIを使って確実に読み込む

より確実な方法として、JavaScriptのFontFace APIを使用する方法があります。load()メソッドはPromiseを返すため、フォントの読み込み完了を待ってから処理を続行できます。

var newFont = new FontFace('New Font', 'url(https://samplefont.woff2)');
newFont.load().then(function(font){
    document.fonts.add(font);
    alert('フォントの読み込みに成功しました！');
});

このコードでは、まず新しいFontFaceオブジェクトを作成し、load()でフォントを読み込みます。読み込みが完了するとthen()のコールバックが実行され、document.fonts.add()によってドキュメントにフォントが登録されます。その後であれば、Canvasへの描画でも確実にそのフォントが適用されます。

補足：document.fonts.readyを活用する

さらに、document.fonts.readyというPromiseを利用すれば、ページ上で必要なすべてのフォントの読み込みが完了したタイミングを検知できます。

document.fonts.ready.then(function() {
    // ここでcanvasへテキストを描画する
});

まとめ

Canvasへのテキスト描画時にWebフォントが反映されないのは、フォントの読み込みが完了していないことが原因です。divタグによるプリロード、FontFace API、document.fonts.readyなどを活用し、フォントの読み込み完了を待ってから描画するようにしましょう。