HTML5 Advent Calendarと言いつつ、中身はCSS3なのですが、そのあたりはご了解いただければと思います。
Web Fontとは
ご存じの方も多いかもしれませんが、Web Fontとは、「端末側に入っていないフォントをWeb経由で取得して表示できる」仕組みのことです。Qiitaでも、アイコンフォントが使われています。
メリット
- 文字として使える…凝った文字を出すときに画像化すると、文字でなくなってしまうので再利用に不便ですが、文字ならそのまま読み取れますし、動的に書き換えるのもごくシンプルに済みます。アクセシビリティやSEOの面でも有利です。
- ベクター表示…Web Fontには通常アウトラインフォントを使いますので、拡大してもスムーズです。Retinaなど高解像度化が進む環境では、かなり便利です。
- 表現の自由度・安定性…端末に入っているフォントに依存する形では、見る環境によって表示が変わってきますが、Web Fontで用意すればどこから見ても同じように見えるものを作れます。
デメリット
- 重い…アイコンフォントだったらロードまでアイコンが見えない程度なのですが、何の細工もせずに本文のフォントをWeb Fontにしてしまうと、フォントがロードされるまで文字が出ないことになってしまいます1。特に、日本語の場合フォントファイルも巨大なので、影響もかなり大きいです。
- ライセンス…Web Fontとしてフォントを使うことはすなわち、「そのフォントを配布する」ことになるので、再配布可能なフォントを使うか、相応の契約を結ぶ必要があります。「きれいだから」と、たとえばヒラギノをWeb Fontにする、なんてことは技術的にもライセンス的にも面倒です。
- 日本語向けサービスの未発達…上に述べた重さやライセンスの問題などで、日本語Web Fontを簡単に試せるようなサービスはあまりありません。欧文だけならGoogle Fontsなどで簡単に使えるようなフォントが各種存在しています。
ファイル形式について
Qiitaでも使われているアイコンフォントのFont Awesomeを見てみると、フォントファイルばかり5つも付いています。中身はすべて同じもので形式が違うだけなのですが、それを見ただけで「自分で用意するのは面倒」と腰が引けてしまうかもしれません。
ただ、実はWeb Font専用の形式にしなくても、ふつうのTrutType/OpenTypeフォント（.ttf/.otf）ファイルで、ほとんどのブラウザに対応できます（Can I use）。IE 8以前に対応するにはEOT形式が必要ですが、この2つがあれば、ほぼすべての環境に対応可能です（iOS 4ではSVGフォントしか対応していない、なんてのもあったようですが、現実問題としてそんな端末を現時点で考慮する必要は限りなく0に近いでしょう）。
なお、形式によっては最初から圧縮されていて、ファイルサイズが小さくなっているものもありますが、TTFでもgzip転送すればほぼ同じぐらいの容量になるので、それで充分な気もします。
セキュリティ上の問題
同じサーバにフォントを置く上では特に問題はないのですが、Google ChromeやFirefoxから別サーバのフォントをダウンロードしようとすると、CORSのチェックが行われて、Access-Control-Allow-Origin:ヘッダで許可されていない場合、フォントを使うことができません。
とりわけ、AWSを使う場合、静的ファイルはS3に置くことが多いので、引っかかることがよくあるかもしれません。S3の場合の設定はクラスメソッドさんのページに詳しいです。
CSSへの書き方
既存のサービスからフォントを借りてくるのも1つの手段ですが、自分でCSSを書けばさらに制御できます。
基本編
フォントの設定には、CSSの@font-faceを使います。
@font-face{
font-family: 'Font Name';
src: url('http://example.com/path/to/font.ttf');
}
font-familyの名前はあとで参照するときに使うだけなので、好きに付けられます。srcには他のリソース同様、url()でファイルを指定します。あとは、他の場所からCSSでfont-family: 'Font Name'として、このフォントを使えます。
応用編
ウェイトの使い分け
同じfont-familyについて、通常時とboldにした場合のフォントを切り替えることができます。
@font-face{
font-family: 'Font Name';
src: url('http://example.com/path/to/font-regular.ttf');
font-weight:normal;
}
@font-face{
font-family: 'Font Name';
src: url('http://example.com/path/to/font-bold.ttf');
font-weight: bold;
}
このように、同じfont-familyで指定することで、標準と太字をまとめて指定でき、font-weightで切り替え可能になります。Webでやる意味があるかはわかりませんが、出版物のように「本文は明朝、強調はゴシック」のような別フォントの指定や、100〜900まで9段階のウェイト指定も、したければ可能です。
ローカルフォントの使用
@font-faceのsrcには、複数のフォントファイルを指定できますが、local('フォント名')という指定を混ぜることもできます。これは、
- Helveticaなど有名だけど有償なのでWeb Fontとして使えないフォントについて、環境にあればそっちを使って、なければフリーフォントをWeb Font化して代用
- IPAフォントのようにそこそこ有名なフォントを使うので、環境にあればダウンロードをさせずに表示させる
などの場面に有用です。