ここ数年で、ウェブフォントを利用するサイトを目にする機会が多くなってきました。今ご覧になっているセブンシックスのサイトも、2016年2月時点ではウェブフォントを利用しています。ウェブフォントの指定方法に関する記事はいたるところで見かけますので、そこに書かれている通りにやれば問題ありません。でも、ウェブ制作者たるもの、言葉ではなく心で理解する必要があります。丁度、2016年1月にIE8のサポートが切れましたので、ここらで一回、CSSのウェブフォント指定についてきちんと考えてみたいと思います。

上記のたった2ステップです。具体的なCSSの記述は以下のようになります。

フォント形式は何を使うべき？

ウェブフォントを利用するにあたって記述を面倒にしている元凶。それは、ブラウザによって対応しているフォント形式が異なることです。制作者は、ひとつのフォントをいくつもの形式に変換して、それらをしかるべき順番で記述しなければなりません。

基本はWOFF形式

WOFF形式は、ウェブフォントのために作られたウェブフォントのためのフォント形式です。多くのブラウザでサポートされています。

@font-face { font-family: 'example'; src: url('example.woff') format('woff'); }

Android4.3のためのTTF形式

これだけの記述で、IE9以降やChrome、Firefoxなど多数のブラウザで問題なく動作します。

Android4.3以前の標準ブラウザや、Opera miniなどの一部モバイルブラウザではWOFF形式に対応していません。無視しても構いませんが、ブラウザシェアなどを考慮すると対応してあげたほうが親切です。この場合、TTF形式を追加します。優先度はWOFFに比べて低いので、後ろに追加してください。IE8以下では、複数のフォントファイルをカンマ区切りで読み込むことができませんでした。でも、もう気にしなくても大丈夫ですね。

@font-face { font-family: 'example'; src: url('example.woff') format('woff'), url('example.ttf') format('truetype'); }

Opera miniという葛藤

Opera miniの立ち位置がちょっと難解で、もしかしたら、わざわざこのブラウザを使う人は通信量を少しでも節約したい人なんじゃないかと、、、。もし、そうであるとすれば、TTF形式を追加するのは逆に迷惑なんじゃないかと。Android4.3のシェアが1%を切っていることを考えると、それよりも遥かにシェアの高いOpera miniユーザーの心意気を優先したほうが良いのでは、、、。ここはちょっと迷うところですね。

WOFF2.0という新しい形式

WOFFよりも新しいWOFF2.0という形式があります。現時点では気にしなくても大丈夫なのですが、分かる人が見た時に「味な真似を」と思わせる効果があります。現時点でWOFF2に対応しているブラウザはChromeやFirefox、Operaなどの比較的新しいバージョンに限られます。面倒でなければ先頭に追加しておくと良いでしょう。

@font-face { font-family: 'example'; src: url('example.woff2') format('woff2'), url('example.woff') format('woff'), url('example.ttf') format('truetype'); }

どうでもいい豆知識

@font-faceの歴史は意外と古く、最初はCSS2のために提案されました。そのため、IE4で早くも実装されており、EOT形式（Embedded Open Type）のフォントに対応しています。IE8までWOFF形式に対応していなかった理由がなんとなく察せますね。