業務で使えるオープンソース（115）「Web Font」

今回のテーマはWeb Fontです。アイコンとして使うほか、オープンソースのフォントを中心にWeb Fontを提供するソフトウェアが増えています。そこでWeb Fontを使うメリット/デメリットと関連オープンソース・ソフトウェアを集めました。

利点

サイズ、色が自由に変えられる

Web Fontの最大のメリットがサイズ、色を自由に変更できる点です。2色しか使えないように思われていますが、Stackiconsのように複数の文字を重ねることで多色展開するテクニックもあります。

サイズを変更しても綺麗に表示されるのもメリットです。様々なサイズの画像を用意するのは大変ですが、Web Fontであれば一つの素材で済みます。

ワンパックに収まる

画像であればCSS Spriteを使って一つにまとめる技術がありますが、位置指定がピクセル単位で面倒です。Web Fontは全て一つに収まっている状態で、スタイルシート側で何の文字を出すかを指定すればいいので扱いやすさはいいです。

一つのファイルに収まるということはネットワークも一度のアクセスで済むのがメリットであり、キャッシュも効きやすいということです。

SEO的に有利

これは一概にメリットがあるか分かりませんが、テキストなのでそのままWebクローラーに食わせられるというメリットがあります。alt要素のように忘れることもありません。また、スクリーンリーダーとの相性も良さそうです（アイコンフォントは違うでしょうが）。

システム連携が容易

画像の場合、ユーザが選んで入力させるのは面倒ですが元がテキストであれば扱いやすいでしょう。また、JavaScriptとの連携を考えた場合もバイナリを扱うよりは使いやすいはずです。

欠点

種類が多い

デスクトップ環境では一般的に使われるのはTrueTypeフォントが多いようですが、OpenType/WebOpenFontFormat/EmbeddedOpenType/SVG Fontを用意するのが一般的です。特にWebOpenFontFormatはWeb用に開発されているのでサイズも小さくて済むようです。EmbeddedOpenTypeはいつもと同じようにMicrosoftが開発したIE専用のフォーマットになるようです。

非対応ブラウザがある

Web Fontは幅広いWebブラウザで使えますが、それでも一部のブラウザでは使えないので注意が必要です。なおIEはバージョン4から対応しているなど、Web Fontについてはかなり先進的です。ただし現在はeotのみ対応とガラパゴスな存在になってしまっています。

読み込みに失敗すると豆腐になる

フォントのURLが切れている場合、豆腐表示になってしまいます。アイコンである以上、意味ある情報を分かりやすく表示する必要があるため豆腐になってしまうと操作上大きな問題になる可能性があります。

アイコンをあまり過信せず、テキストと一緒に表示すると言った工夫が必要でしょう。

メンテナンスが大変

Web Fontをダウンロードして利用するだけであれば問題ないでしょうが、作成側になるとメンテナンスがかなり大変な分野と言えるのではないでしょうか。フォーマットが複数ある上、編集と書き出しは専用のソフトウェアが必要です。それゆえ社内で独自のWeb Fontを作成して提供…というのはかなり工数が必要でお勧めできません。

日本語フォントのサイズ

英語、アイコン系Web Fontはサイズがそれほど大きくありませんが、日本語Web Fontは総じてサイズが大きく、オンラインで無制限に使うのに適しません。ただし最近のWeb Font配信サービスではHTML上のテキストを解析して使われている文字だけを動的にWeb Font化するようになっています。これによりキャッシュは効きづらいですが、サイズを軽減できるようになっています。