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

ウェブフォント指定の2ステップ

ウェブフォントの指定方法はカンタンです。

1. CSSの@font-faceルールを使って新しいfont-familyを定義する。
2. ウェブフォントを適用したい箇所に新しく定義したfont-familyを指定する。

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

// 新しいfont-familyを定義
@font-face {
  font-family: '名前';
  src: url('フォントファイルのパス') format('フォーマット名');
}

// 定義したfont-familyを指定
h1 {
  font-family: '名前'; 
}

では、これらの記述について確認していきたいと思います。

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

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

基本はWOFF形式

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

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

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

Android4.3のためのTTF形式

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形式に対応していなかった理由がなんとなく察せますね。

その他の所感

日本語フォントは難しい

モバイルデバイスの普及が著しい昨今、通信量の節約はウェブ制作者の命題です。ウェブフォントは、効果的に使えば、これまで画像で表現していた文字をテキストで代替できるため、通信量を抑えることにも繋がります。ただし、日本語フォントには注意が必要です。フォントファイルそのものの容量が非常に大きいため、逆に通信量を大幅に増加させる可能性があります。

フォントのライセンスを確認

ウェブフォントとして使用する前に、そのフォントのライセンスを確認しておく必要があります。手持ちのフォントをどれでもウェブフォントとして使用していいワケではありませんのでご注意ください。

ウェブフォントが無効なユーザーもいる

ブラウザのオプションを変更したり、ユーザースタイルシートを使用している上級ユーザーには、ウェブフォント自体が反映されないこともあります。Javascriptを無効にしているユーザーがいるのと似ていますね。すべてのユーザーが同じ環境で閲覧しているワケではない、というのがウェブの面白いところです。

まとめ

ベーシックに記述したい人用

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

h1 {
	font-family: 'example';
}

味な真似をしたい人用

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

h1 {
	font-family: 'example';
}

Opera miniユーザーの心意気を汲む

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

h1 {
	font-family: 'example';
}

IE8以下を考慮しなければ、記述もシンプルで良い感じ。いずれにせよ、ウェブフォントを使用する際は「本当にこのウェブフォントが必要か？」という当たり前の疑問を、きちんと検討する意識を持ちたいですね！