Webフォント(Web Fonts)とは、ウェブページで任意のフォントを表示できるCSS3の機能です。最近よく見かけるキーワードの一つであるWebフォント、ここでは僕が理解できたことをまとめて行こうと思います。
これまではウェブページでテキストを表示する際、利用するマシンにインストールされているフォントが使われていました。またfontタグやfont-familyを使って指定させることもできましたが、WindowsやMacintoshで共通のフォントを指定する必要がありました。
そのためウェブ制作者が意図するフォントを利用したい場合は、文字画像を作成して配置するかサーバプログラムで画像に変換して出力するなど、手間のかかる作業が必要でした。
しかしCSS3のWebフォント機能ではウェブサーバ上にフォントファイルをアップして、それをCSSの@font-faceで指定することによりウェブページで任意のフォントを表示することができるようになりました。OpenType(OTF)またはTrueType(TTF)のフォントが利用できます。
↑大量のフォントを提供しているTypekitというWebフォントサービスです。文字画像のように見える部分も、Webフォント機能によりテキストととして扱われています。
いまのところのWebフォントのメリットと注意点
以下にてWebフォントを使うメリットと問題点や注意点を、今僕がわかる範囲でまとめてみました。
Webフォントを使う利点
- CSSによる指定で簡単に利用できる
- OpenType(OTF)またはTrueType(TTF)形式のフォントに対応
- 意図するページ作りのために画像化(gif, jpg, pngなど)する必要がない
- 意図するページ作りのためにFlash化(swf)する必要がない
- 文字画像ではなくテキストとして表示されるのでSEO対策にも有効
- テキストを選択できるためコピー＆ペーストができる
対応ブラウザの問題
- Safari 3.1～
- Firefox 3.5～
- Google Chrome 2.0β～
- Opera 10～
WindowsのInternet Explorerでは4.0から対応になるのですが、IEでWebフォントを使うには一般的なOTF/TTF形式ではなく、独自規格であるEOT(Embedded Open Type)形式のフォントを用意する必要があります。マイクロソフトが提供する無料ツールWeb Embedding Fonts Tool(WEFT)を使えばTTFからEOTへの変換が可能ですが、このWEFTは使い勝手が非常に悪いらしく、1つのフォントを変換するのに膨大な時間がかかってしまうそうです。
そこで、より手軽な変換ツールとしてttf2eotというWebサービスがあります。このttf2eotは変換したいTTFファイルを選択して“Convert to .eot”ボタンを押すだけでEOTファイルに変換してくれます。
使いたいフォントがOTF形式の場合は？
フォントによってはTTF形式ではなく、OTF形式しか用意されていない場合もあります。IE以外のモダンブラウザーではOTF形式の読み込みもサポートしているため問題ありませんが、IEで読み込めるのはEOT形式のみです。そこで、OTF形式のフォントの場合は、Free online font converterというWebサービスを利用していったんTTF形式に変換します。TTF形式のファイルができたら、あとは前述のttf2eotでEOTファイルに変換すればIEでも読み込めます。
いずれにせよIEでWebフォントを使うためには、他のブラウザに比べ手間がかかってしまう状況にあるみたいです。まだWebフォントが浸透するのには時間がかかると言うことでしょうか。
ライセンスの確認が必要
Webフォントを利用する際は、事前にフォントのライセンス（使用許諾契約の内容）を必ず確認する必要があります。疑問な点はフォントメーカーや作者などの権利者に問い合わせるなどして解決しておきましょう。
日本語フォントに注意
日本語のような文字数の多いマルチバイトなフォントはファイルサイズが大きいです。そうなるとダウンロードに時間がかかってしまい、それが終わるまでの間、ブラウザーはデフォルトのフォントによる代替表示、もしくは空白の状態になってしまいます。Webフォントでは日本語フォントの利用は最低限にとどめた方が良さそうです。
ここでは何種類かWebフォントに関する記事を参考にさせてもらってここまでまとめてみましたが、情報の修正や詳しい実装方法など、また追記して行こうと思います。
[…] Webページで自由にフォントを表示させるCSS3のWebフォント機能について […]