「FOUT（フォント切り替えのちらつき）を防ぐ」でウェブフォントのロード状況が<html>のクラスに反映される事を紹介しました。Web Font Loaderでは他にもJavaScriptから個別のウェブフォントのロード状況をコールバックで知ることができます。これは、例えば、<canvas>で文字をウェブフォントで描画する際に便利です。
ウェブフォントのロードを検知する
Web Font Loaderではウェブフォントのロードを次のようにフックできます。
WebFontConfig = { loading: function() {}, active: function() {}, inactive: function() {}, fontloading: function(familyName, fvd) {}, fontactive: function(familyName, fvd) {}, fontinactive: function(familyName, fvd) {} };
上記のように、個別のウェブフォントのロード状況・結果を知るには、設定オブジェクトのfontactiveやfontinactiveにコールバック関数をセットします。これらのコールバックにはフォント名とfvdが渡されます。
canvasでウェブフォントを使う
コールバックを使えばcanvasにウェブフォントを安全に描くことができます。canvasにウェブフォントで文字を描画する場合、ウェブフォントロード前に書き出してしまうとserif等で描画されてしまうのでフォントがロードされたタイミングをチェックする必要があるのですが、この面倒なチェックをWeb Font Loaderが代わりにしてくれます。
デモ（キャッシュがあると問題が再現しないかもしれないのでプライバシーモードで）
このデモで分かるように、適切なタイミングで描画しないと意図しない表示になります。エラーにならないので厄介ですね。