フォントが対応しているか判定する

どのブラウザでも、フォントファミリー指定がすべて失敗したときのフォールバックフォントが定義されている。

このため、わざとあり得ないフォントファミリー名を指定することでフォールバックフォントを指定させて、そのサイズと見比べることで、フォントが本当に選ばれたかどうかを判定する。

もう一つの方法は、わざとフォールバックフォントをWebフォントとして指定して、フォールバックしたときに、そのフォントがなかったことを検出する。

Adobe Blank というフォントは、すべての文字を幅0とするフォント。

フォントがロードされるまでの間はデフォルトフォントが使われてしまうので、document.fonts.loads で明示的にロードを待つのと、フォントすべてのロードを待つために document.fonts.ready を使う。

Windowsで見たとき

https://gyazo.com/5e222f61f76b5ffb4b49dd325260f82a

Mac (Safari)で見たとき

https://gyazo.com/941bdaa1bb5d0e0f5a752fba1315dbad

docuement.fonts.ready がちゃんと効いていない? リロードすると正常になる。

これを使うと、フォント指定で幅が出るならフォントが存在するという判定をすることができる。

問題は「そもそもフォント名を知らなければ指定できない」という所

ユーザーが独自に追加したフォントは知りようがない。

フォント名を取得するAPIは「ユーザーを特定する可能性がある」(フィンガープリント)ために実装されないことになっている。(馬鹿すぎる)

Webからローカルフォントのデータを取得する～Local Font Access APIとは～