エメラルドマウンテンの麓。

Webフォントがブラウザで有効か?きっちり調べる

趣味の Web 開発でも使う為いよいよガッツリ調べました。無効な Web フォントのフォールバックを行いたい場合にはどのような判定法があるのでしょう?

調べている間に知りましたが、ここで紹介する手法は Canvas 要素に Web フォントで書きたい場合にもマストです。Web 開発は罠が多いですね。

Webフォントのサポートブラウザ

以下の表は 『LucasFonts | Webfonts』のもので、記事はさらに caniuse を元にしています。誤りがあったため、私の方で修正と追記を行っています。

WOFFEOTSVGTTFOTF
Safari5.1 +3.2 +3.1 +3.1 +
iOS Safari5.0 +3.2 +4.2 +4.2 +
Firefox3.6 +3.5 +3.5 +
Firefox for Android15.0 +15.0 +15.0 +
Chrome5.0 +4.0 +4.0 +4.0 +
Chrome for Android18.0 +18.0 +18.0 +18.0 +
InternetExplorer9.0 +6.0 + 4.0 +
IE Mobile10.0 +
Opera11.1 +9.0 + 10.0 +10.0 +10.0 +
Opera Mini
Opera Mobile11.0 +10.0 +10.0 +10.0 +
Android Browser4.4 +3.0 +2.2 +2.2 +
Blackberry Browser7.0 +7.0 +7.0 +7.0 +

部分追記

IE は正しくは 4.0 以降からサポートします。

Opera は 9.0 から SVG フォントをサポートする、とありましたが手元の環境では確認できませんでした。『Opera Presto 2.2 と Opera 10 概観 - Dev.Opera』では 10 から Web フォントと SVG Web Font をサポートしているようです。

私達は古い(そして新しい)モバイル・ブラウザー―例えばOpera MiniやNokia XPress Browser、Blackberry 4-5、Android 2.1、Windows Phone 7-7.8―が@font-faceをまったくサポートしていないことを発見しました。

Webフォントが有効か?判定する

1.ブラックリストにヒット[N][Y]--> C)フォールバック
                         |
2.CSS から参照している Web Font が  
  適用されている[N][Y]----------> A)OK!
                 |      
3.データ URI が使用可能[Y][N]-+
                        |     |
4.CSS に埋めた Web Font が    |
  適用されている[Y][N]--------+-> C)フォールバック
                 |          
                 +> B)Web Font を埋めた CSS の読み込み

Web フォントが無効のケースには次の3パターンが考えられます。

  1. そもそもブラウザが Web フォントに対応していない
  2. ユーザーの設定によって Web フォントが切られている
  3. 通信量削減用のネットワーク監視アプリ等で Web フォントのダウンロードが制限されている

残念ながら無効の場合、画像や SVG、Pure CSS アイコン、記号文字(グリフ)によるフォールバックが考えられます。画像の表示を禁止するユーザー設定やアドオンもありますし、便利な記号文字は大抵機種依存です。ムキになると際限がありませんね…

フォールバックに使うグリフは細心の注意を払って決定しましょう。クロス・ブラウザー及びクロス・プラットフォームであるかはグリフによって違います。John Holt Ripleyの互換性の表を参照してください。

1. そもそもブラウザがWebフォントに対応していない

この判定には Modernizr にある機能判定が有効な場合もありますが、これをすり抜けるブラウザもあるため Modernizr でも初めにブラックリストで弾いています。

ブラックリスト

参考になるのは Modernizr です。最新のコードでは古い Android の判定を削除しているため、以前のコードにリンクしています。

併せて更にマイナーなブラウザも調査している『Testing @font-face Support on Mobile and Tablet』を参考にするのが良いでしょう。

そもそもマイナーなブラウザまでカバーする判定には拙著『「デスクトップ版を表示する」にチェックを付けると平然とUAを偽装するAndroid用標準ブラウザの判定をムキになってしてみます』で紹介しているコードを一旦お勧めします。UaseAgent 文字列の偽装にもある程度の耐性があります。

@font-faceの機能判定

Modernizr を参考にします。

2. ユーザー設定によって Web フォントが切られている

ユーザー設定によって無効になっている場合、機能判定の時点で判断できると思われます。もしブラウザがそのような実装になっていない場合、後述の実測によって最終的な判断をします。

3. 通信監視アプリ等で Web フォントのダウンロードが制限されている

通信量の削減やセキュリティの為に通信監視アプリやアドオン等で Web フォントのダウンロードを禁止されているケースが考えられます。この場合、CSS に埋め込む等で監視をすり抜けることができます。

データURIでCSSに埋め込んだWebフォントは機能するか?

データ URI な Web フォントが使用可能か? CSS にあらかじめチェック用の Web フォントを埋め込んだり、js から動的に書き出して確認します。

但し、無用な通信をしたくない、というユーザーの意思をまずは尊重し、巨大な日本語フォントセットをダウンロードする様なことは控えましょう。小さなアイコンフォントに限るなど抑制的な利用に留めましょう。

そもそもデータURIが使えるか?の判定には Modernizr が参考になります。また IE9 以下では画像ファイルしか扱えない、という制限があるためあらかじめ除外します。

Webフォントが有効になった?実測による判定

Web フォントが有効になるタイミングを知るには、新しい仕様 document.fonts を備えている場合はこれを利用できます。非対応の場合、隠し要素を測定して判定するという古典的な方法を用いて Web フォントが有効であることを確定させます。

document.fontsを使う方法

https://github.com/bramstein/fontfaceobserver/blob/master/src/observer.js などを参考にします。

古典的な方法

JavaScript/CSS Font Detector』で紹介されているコードが参考になりますが、そのままのコードでは Webkit で判定に失敗するため monospace を外しました。同様の報告は『canvas要素にwebフォントを確実に描画する方法』のコードのコメントにもありました。