意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。
先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。
ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。
そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。
４種類のフォーマット
一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートしていないブラウザーも残っています。
そこで、絶対にコピペできない文章を作ったったwwww では、4 種類すべてのフォントを設置し、CSS には次のように記述していました。
@font-face {
font-family: 'CipherM+1cregular';
src: url('ciphered-mplus.eot');
src: url('ciphered-mplus.eot?#iefix') format('embedded-opentype'),
url('ciphered-mplus.woff') format('woff'),
url('ciphered-mplus.ttf') format('truetype'),
url('ciphered-mplus.svg#M+1cregular') format('svg');
}
IE8 以前は複数のフォント指定に対応していないため、一部でハックを活用しています。この指定は Font Squirrel | Create Your Own @font-face Kits を使って出力されたものをそのまま利用しています。
では、このような指定をしたときに、どのフォーマットが一番利用されたのでしょうか。
これが 2012 年の Web フォント利用率だ
公開後の 2 日間（4月20日～4月21日）には 43,892 件の PV がありました。このうち、利用されたフォントの割合は・・・
はい、7 割以上の人が WOFF フォーマットを利用していました。見逃せないのが、どのフォントも利用しなかった 3.94 %（1,729 PV）の存在です。
3.94% の詳細はこのあと分析するとして、まずはそれぞれのフォーマット別にどういうブラウザーからのアクセスが上位を占めていたのかを紹介していきます。
期待の新星: WOFF フォーマット
一番多かったのが WOFF フォーマット。
Web Open Font Format という名前からして、Web フォントのために生まれてきた新人さん。今後、主流になるのは間違いないんだけども、まだ 3 割の人は使ってくれてない状況。
そんな WOFF に対応しているミーハーなブラウザーの上位 10 個はこれだ！
| ブラウザー | PV | 割合 |
|---|---|---|
 Chrome 18 (PC Windows) | 8,525 | 27.06% |
 Safari 5.1 (iPhone iOS 5.1) | 6,434 | 20.42% |
 Firefox 11 (PC Windows) | 5,663 | 17.98% |
| Chrome 18 (PC Mac OS X) | 2,326 | 7.38% |
| Safari 5.1.5 (PC Mac OS X) | 1,048 | 3.33% |
| Firefox 11 (PC Mac OS X) | 988 | 3.14% |
| Safari 5.1 (iPad iOS 5.1) | 889 | 2.82% |
| Safari 5.1 (iPhone iOS 5.0.1) | 842 | 2.67% |
 Opera 11.62 (PC Windows) | 576 | 1.83% |
| Safari 5 (iPhone iOS 5.1) | 450 | 1.43% |
分析：
- Chrome、Safari、Opera、Firefox など、主要なブラウザーの最新版が対応済み。
- IE9 も対応はしているが、CSS での指定順の関係から WOFF フォーマットは利用していない。
- iPhone、iPad では iOS 5 以降なら対応済み。
- Android 4 以降は Chrome 18 や一部の Mobile Safari（WebKit ビルド番号 535.7 以降）が対応済み。
はやく全部 WOFF でいける時代がくるといいですね。
PC の覇者: TTF フォーマット
お次は 14% の人が参照した TTF フォーマット。
TTF は TrueType Font) の略。いまは昔、1990 年に Apple と Microsoft が共同開発した業界標準のフォーマットです。
しかし、「生のフォント ファイルをそのまま Web にアップロードするのはどうなのよ？」という声があり、Web フォント業界では WOFF さんにその座を譲り渡しました。
そんな TTF さんを欲したのはコイツらだ!!!
| ブラウザー | PV | 割合 |
|---|---|---|
| Mobile Safari 533.1 (Android 2.3.4) | 1,397 | 22.06% |
| Mobile Safari 533.1 (Android 2.3.3) | 1,128 | 17.81% |
| Mobile Safari 533.1 (Android 2.3.5) | 580 | 9.16% |
| Mobile Safari 533.1 (Android 2.3.6) | 509 | 8.04% |
| Mobile Safari 533.1 (Android 2.2.1) | 454 | 7.17% |
| Mobile Safari 533.1 (Android 2.2.2) | 274 | 4.33% |
| Safari 5.0.2 (iPhone iOS 4.3.5) | 236 | 3.73% |
| Mobile Safari 533.1 (Android 2.3.7) | 232 | 3.66% |
| Safari 5.0.2 (iPhone iOS 4.3.3) | 171 | 2.70% |
| Mobile Safari 530.17 (Android 2.1) | 166 | 2.62% |
ザ・モバイル。
Android 2、iOS 4.2、iOS 4.3 など、少し古めのスマートフォンが独占しています。
ランク外には Firefox 3.5 (Windows)、 Android 4 の Mobile Safari（WebKit ビルド番号 535.7 以前）などもいました。
TTF さんは、少し前に愛されたフォーマットだということが分かりました。君は Web ではダメだったけど、PC の世界ではまだまだ主流なんだよ！、と励ましてあげましょう。
時代を切り開いた英雄: EOT フォーマット
次は約 10% の人に求められた EOT フォーマットです。
いまをさかのぼること 14 年前、IE4 で Web フォントを実現するときに策定されたのが EOT（Embedded OpenType）フォーマットです。
当然、EOT さんを欲するのは・・・
| ブラウザー | PV | 割合 |
|---|---|---|
 MSIE 7 (PC Windows) | 1,615 | 38.15% |
| MSIE 8 (PC Windows) | 1,415 | 33.43% |
| MSIE 9 (PC Windows) | 1,021 | 24.12% |
| MSIE 6 (PC Windows) | 110 | 2.60% |
| Opera 11.62 (PC Mac OS X) | 31 | 0.73% |
| Opera 11.63 (PC Mac OS X) | 3 | 0.07% |
| Opera 11.61 (PC Mac OS X) | 3 | 0.07% |
| Opera 11.62 (PC Windows) | 2 | 0.05% |
| MSIE 10 (PC Windows) | 2 | 0.05% |
はい、IE さんです。ただ、IE 一途かと思いきや、なぜか Mac の Opera も EOT を利用しています。
そんな IE さんも、IE9 で WOFF フォーマットに対応し、いよいよ死の瞬間が迫ってきています。さよなら、EOT さん。あなたが Web フォントの道を切り開いたから今があるんだよ・・・。
ところで、日本での IE の利用率は 50% を超えているはずです。にもかかわらず、EOT フォーマットへのアクセスは全体の 10% 程度でした。これは集計期間（公開直後 2 日間）には先進的なユーザー層の訪問が多かっからだと推測できます。
その後、4月25日に ITmedia に取り上げられると、公開直後よりも多くのアクセスが集まりました。この期間で集計してみると、
- WOFF フォーマット: 50.3%
- EOT フォーマット: 36.1%
と、一般ユーザーの分布に近くなりました。
もう過去の人？: SVG フォント
利用率が 1% を切ったのが SVG フォントです。
SVG はベクター画像を扱うための規格であり、HTML5 でも注目されています。フォントがない環境でも SVG で文字を表示したい場合を考慮し、SVG にはフォント データを埋め込むことができるようになっています。この機能を活用したのが、SVG フォントです。
そんな SVG フォントを欲したのは・・・。
| ブラウザー | PV | 割合 |
|---|---|---|
| Safari 4.0.5 (iPhone iOS 4.1) | 33 | 40.74% |
| Safari 4.0.5 (iPhone iOS 4.0.1) | 11 | 13.58% |
| Safari 4.0.5 (iPhone iOS 4.0) | 7 | 8.64% |
| Safari 4.0.5 (iPhone iOS 4.0.2) | 5 | 6.17% |
| Safari 4.0.4 (iPad iOS 3.2.2) | 4 | 4.94% |
| Safari 4.0 (iPhone iOS 3.1.3) | 3 | 3.70% |
 BlackBerry 534.8 (BlackBerry) | 3 | 3.70% |
かなり古めの iOS の Safari が SVG フォントを利用するようです。
本当にごくわずかではありますが、古い iPhone や iPad にも対応したい場合には、SVG フォントを用意しておくとよいでしょう。
Web フォントを利用しない 3.94% ってどういう人？
さて、問題は Web フォントを利用しない 3.94% の人たちです。
大きく分けて 2 パターンあります。
その１: ブラウザーが対応していない
本当にごく少数ですが、Web フォントに対応していないブラウザーでアクセスしてきた人がいました（一部抜粋）。
| ブラウザー | PV |
|---|---|
| Firefox 3 (PC Windows) | 12 |
| MSIE 7 (FujitsuToshibaMobileCommun IS12T Windows) | 9 |
| Firefox 3 (PC Mac OS X) | 5 |
| Nintendo 3DS 1.7455 (Nintendo 3DS ) | 5 |
| Safari 3.0.4 (PC Mac OS X) | 4 |
| Firefox 2 (PC Windows) | 3 |
| Opera 9.3 (PC) | 3 |
 Netscape 4 (PC) | 3 |
| MSIE 9 (FujitsuToshibaMobileCommun IS12T Windows) | 3 |
| NetFront (Sony PlayStation Portable Playstation Portable GameOS) | 2 |
Windows Phone とか、Nintendo DS とか、プレステとか、もしくは、古いブラウザーを強固に使い続ける人とか…。4万ヒット中に数十人のレベルなので、無視してもいいレベルでしょう。
しかし、無視できないのが次の人たちです。
その 2: ブラウザーは対応してるけど無効になっている
Web フォントに対応したブラウザーでは、デフォルトで Web フォントが有効となります。しかし、何らかのカスタマイズによって Web フォントが無効になっている人がいました。
ブラウザー別に分類するとこうなりました。
| ブラウザー | PV | 割合 | 同一ブラウザー 中の割合 |
|---|---|---|---|
| Firefox 11 (PC Windows) | 285 | 16.48% | 4.77% |
| Chrome 18 (PC Windows) | 162 | 9.37% | 1.86% |
| Safari 5.1 (iPhone iOS 5.1) | 142 | 8.21% | 2.16% |
| Opera 11.62 (PC Windows) | 103 | 5.96% | 14.69% |
| MSIE 7 (PC Windows) | 82 | 4.74% | 4.83% |
| MSIE 8 (PC Windows) | 58 | 3.35% | 3.93% |
| Firefox 11 (PC Mac OS X) | 52 | 3.01% | 5.00% |
| Mobile Safari 533.1 (Android 2.3.4) | 51 | 2.95% | 3.52% |
| MSIE 9 (PC Windows) | 50 | 2.89% | 4.66% |
| Mobile Safari 533.1 (Android 2.3.3) | 46 | 2.66% | 3.92% |
注目すべきは一番右側の列です。同じブラウザーを利用している人のうち、何パーセントが Web フォントをロードしなかったかを表します。
IE、Firefox、Chrome、Opera、Safari など、主要なブラウザーで数パーセントの人が Web フォントをロードしていないことが分かります。
では、いったい、どのような設定をすると、Web フォントが無効になるのでしょうか。
Web フォントが無効になる設定とは？
1. Web ページが指定するフォントを無視したい人
ブラウザーによっては、Web ページで指定されたフォントを利用しない設定項目があります。
- Firefox
- [Web ページが指定したフォントを優先する] のチェックボックス
- Internet Explorer
- [Web ページで指定されたフォント スタイルを使用しない] のチェックボックス
この設定を変更すると Web フォントの指定は無視されます。
また、あまり多くはないでしょうが、ユーザースタイルシートを設定している人も同じ状態となります。
2. 拡張機能によって無効化されている人
ブラウザー拡張の中には、Web フォントの利用を禁止するものもあります。
有名どころでは NoScript です。Google Web Fonts の FAQ には「NoScript のオプションを開いて、Embeddings タブで [Forbid @font-face] のチェックをはずすことで、Web フォントが使えるようになる」と書いてあります。
NoScript が Web フォントを無効にする理由は、セキュリティーにあるようです。Firefox は Web フォントを扱うために FreeType フォント ライブラリーを利用しているのですが、このライブラリーに問題があるようです。
FreeType フォント ライブラリーが Web 上の信頼できないフォント ファイルを読み込むのは、本当に困った状況です。
というのも、このライブラリーは、ローカルコンピューター上の信頼できるフォントを処理するためのものであり、信頼できないフォントを読み込むことを想定していないように思えるからです。実際、このライブラリーが Firefox に導入されたあと、いくつもの脆弱性がみつかりました。
hackademix.net » Why NoScript Blocks Web Fonts
ここで書いてある脆弱性は、たとえばこの件だと思います。
Firefox 3.6.2では、Firefox 3.6で追加された「WOFF」形式フォントの展開処理に関する脆弱性を修正している。この脆弱性が悪用された場合、ブラウザーのクラッシュが引き起こされ、任意のコードを実行させられる危険がある。
「Firefox 3.6.2」公開、危険度の高い脆弱性を修正 -INTERNET Watch
このような事例もあるため、NoScript は「Web フォントはスクリプト実行と同等の危険性がある」と判断して、Web フォントをデフォルトで無効にしているようです。
(追記 2012/05/01) Firefox は 3.6.13 以降で OTS というフォント サニタイザーを利用するように修正されており、現在では Web フォントを利用することによる危険性は小さいものと考えられます。OTS は Google Chrome でも利用されています。(twitter で @yusk_ さんに教えていただきました(その1, その2)。ありがとうございます)
3. iPhone, Android は…？
iPhone や Android でも数パーセントほど、Web フォントをロードしなかった人がいたのですが、こちらについては原因は分かっていません。
何らかの設定があるのでしょうか。ご存知の方がいれば教えてください。
また、「iPhone ではそもそもコピーできない」という指摘がいくつかありましたが、iPhone 3GS では <IFRAME> 内のテキストをコピーできない のが原因でした。
結論: Web フォントに依存してはいけない
長々と調べてきましたが、3 行で結論をまとめるとこうなります。
- WOFF フォーマットが普及しているが、現時点では各フォーマットの Web フォントを用意したほうがよい。
- Web フォントに対応していないブラウザーは皆無である。
- Web フォントを使わないように設定変更している人が数パーセントいる。
中でも、忘れてはいけないのが Web フォントを使わない人が確実に数パーセントいる という事実です。その状況は今後も変わらないでしょう。
最近、Web フォントでアイコンを表示するテクニックが注目を集めています。
- 意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
- 商用OKで、Webフォントにも使用可能な、シンプルで汎用的なアイコンタイプのフリーフォント・Modern Pictograms - かちびと.net
しかし、数パーセントの人には、Web フォントによるアイコンは意味不明な文字にしか見えません*1。本当に万人に届けたいコンテンツを作るのであればアイコンは画像を使うべきでしょう。
最後に、今回の集計結果を Google スプレッドシートに公開しておきます。紙面の都合で省略したデータもありますので、興味のある方は確認してみてください。
*1: 追記 2012/05/03: 私用領域へのマッピングだけでは解決しないもの - Weblog - hail2u.net によると、最近は Private Use Area (私用領域または外字領域)へアイコンをマッピングするもの増えてきているそうです。