WebFontを試してみる

仕事でフォントの話が出てきましたので、ちょっと調べてみました。
特にWebでの利用の場合、CSS3からWebFontに対応しているということですので、どれくらい使えるもんだろうかというのをテストしてみました。

まずは使いたいフォントをサーバーにアップロードします。ただしライセンスの問題がありますので、今回は比較的クリアしやすいと思われるIPAのフォント(明朝7.5MB、ゴシック5.8MB)を使いました。

続いてCSSの設定です。先ほどアップロードしたフォントをCSSに設定するわけです。書き方は下記の通り。

@font-face{
font-family: WebFont_IPAexM;
src: url('../font/ipaexm.ttf') format("truetype");
}

みたいな感じで、まずは使いたいフォントとその種類、そしてそれにどういう名前を付けて利用するのかを書きます。上の例では

「font-family: WebFont_IPAexM;」

の部分がフォント名称定義で、

「src: url('../font/ipaexm.ttf') format("truetype");」

が使いたいフォントと、そのフォーマットです。ちなみにOpenTypeフォントを使う場合は、「truetype」を「opentype」に変えるだけ。

あとは実際に使いたい場所でfont-familyに、定義した名称を指定するだけ。

ちなみに名称定意義はいくつでも定義できるので、1つのページでいろんなフォントを使うことが可能なのです。

で、テストで会社のサーバーにIPAフォントをアップロード、どれくらいで表示されるのかを測ってみました。あちこちのサイ トを見ると

「2バイト文字系のフォントはサイズが大きいので実用的ではない」

ということが書いてありましたので、チェックをしてみたわけです。が、会社サーバーとの回線が太いのか、2秒程度で表示されてしまいました…これではテストにならん。

2度目以降はキャッシュに落ちてきているフォントファイルを使うようで、これもレンダリングエンジンの処理時間だけという状態だったわけで、これだと十分実用に耐えるんだよなぁ。

うーん、もっと回線が細いであろうサーバーに置き直さないとダメだなぁ…
あと、実用的かどうかはフォントのライセンス問題がクリアできてるかどうかですか。