フォントが効いているかは、APIに聞かずにピクセルで測る

Webフォントが本当に使われているかを確かめる方法は3つあります。そのうち2つは嘘をつきます。

1つ目：フォントのAPIに聞く

ブラウザには「このフォントはいま使えるか」を問い合わせるインターフェースがあります。

それが答えているのは「フォントの指定が解析され、ファイルのダウンロードが終わったか」です。「画面のこの文字列がそのフォントで描かれているか」ではありません。

フォントファイルのダウンロードに成功していれば、必要な文字が含まれていなくても、答えは「使える」です。

フォントを指定する前と後で幅を比べ、変わっていれば切り替わった、とみなす方法です。

問題は、フォールバックしたフォントでも幅は変わることです。測れたのは「別のフォントに替わった」ことで、「狙ったフォントに替わった」ことではありません。

しかも、狙ったフォントとシステムのデフォルトの幅がたまたま近ければ、その差はノイズに埋もれます。

同じ文字列を2通りの設定でキャンバスに描き、ピクセルを比べます。

2枚が完全に同じなら、狙ったフォントは使われていません。違えば、使われています。

この方法は、途中のどの層の報告も信じる必要がありません。最後の結果を直接見ているからです。

⭐ 検証は、できるだけ最終的な表示に近い層で行います。

途中の各層の報告が証明しているのは、自分の担当分が終わったことだけです。そして故障がいちばん起きやすいのは、層と層のあいだの、誰も受け持っていない隙間です。