ウェブフォント (web font) についてあれこれ調べた備忘録です．私は，ディレクションをすることはありますが，デザイナではありません．デザイナにとっては常識の範囲だと想像します．
Google Fonts
- Google Fonts がウェブフォントとして提供しているのは欧文フォントのみ
- Noto Sans Japanese は当然欧文フォントではない
→ Noto Sans Japanese を自前のサーバに置く必要あり
ブラウザ間の非互換
ウェブフォントの形式は一つではなく，ブラウザごとに採用している形式が異なる．すなわち，フォント形式については非互換で，複数ブラウザをサポートしようとすると，複数のフォント形式でファイルを用意する必要があり面倒なことこの上ない．最近のほとんどのブラウザは WOFF (Web Open Font Format) をサポートしているので、これが使えればよいのだが、一部のブラウザはサポートしていない。
- IE8 が悪い
- EOT を用意してあげないと
- Android (4.4 を除く) が悪い
- 勘弁してください
保守的な @font-face
ブラウザ間の非互換に対応するために，WOFF を基本としながらも，IE 用に EOT を使うことで妥協した @font-face の例．このパターンはあまり見かけないので一般的ではないのかもしれない。
@font-face {
font-family: 'Noto Sans Japanese';
src: local('Noto Sans Japanese'), url('http://www.example.com/NotoSansJp.woff'), url('http://www.example.com/NotoSansJp.eot');
}
実運用上の @font-face は weight 毎にファイルを分けているので，もうちょっと複雑なのだが，EOT/OTF 使い分けのイメージはこれで伝わるかと．
おわりに
ひとつのお願い:
- IE8 が早く消えて無くなりますように
Android は無かったことにする．