Firefox 3.6でサポートされたWOFFを試してみる

QUOTATION No.6
タイポグラフィのコラムを執筆しました。

2010.01.22 - 23:43

Firefox 3.6でサポートされたWOFFを試してみる

当ブログでは定期的に@font-faceについて取り上げていますが、本日、以前新しいwebfont形式“WOFF”に正式対応したFirefox 3.6がリリースされました。

本来ならばIEやiPhoneに対応させるために、EOT形式やSVG形式で…とやる必要があるのですが、今回はFirefox 3.6に限定し、このWOFFを使う方法を簡単に説明したいと思います。まずは下記のデモをどうぞ。Firefox 3.6以降でご覧下さい。

Hello! Mozilla Firefox 3.6 supports Web Open Font Format (WOFF).

今回使用しているフォントは私が学生の頃制作したSatelliteです。まずは既存のフォントファイルを@font-face Generatorを使ってWOFF形式に変換し、キットをダウンロードをします。そしてWOFFファイルを、必要であれば任意の名前に変更しサーバにアップしてください。
【参考】Font Squirrel で始める @font-face - terkel.jp

次にCSSファイルに次のような記述を追加します。font-family:の部分は、変数のような感じなので任意の名前で構いません。src:の部分はさきほどアップしたパスを記述します。format(’woff’);の部分はそのままです。

@font-face {
font-family: mySatellite;
src: url(/shared/satellite.woff) format(’woff’);
}

続いてCSSファイルに、フォントを指定したいIDやクラスにfont-familyのセレクタを追加します。プロパティはさきほど@font-faceの部分で設定した任意の名前です。今回はmySatelliteです。

.fontface {
font-family: mySatellite;
}

これだけでOKです。fontfaceのクラスを追加すると上記のように任意のフォントで表示することができます。

<p class=”fontface”>Hello! Mozilla Firefox 3.6 supports Web Open Font Format (WOFF).</p>

うまくいかない場合は、WOFFファイルへのパスが間違ってないか、CSSの記述が間違っていないかを確認してみてください。念を押しますがFirefox 3.6で表示しているかも確認してください。

ちなみに私のサイトでダウンロードできるフリーフォントは@font-face用フォントとして勝手に変換していただいて構いません。本文に全く向かないので実用的ではないと思いますが…。

他にも自由に使える@font-faceキットはFont Squirrelのダウンロードページよりダウンロードできます。他のフォントを変換される際は、ラインセンスに問題がないか確認の上行うようにしてください。

今後様々なブラウザでWOFFがサポートされ、普及されることを心から祈ります。