Firefoxがwebfontsを実装

と言ってもリリースはもう少し先のようだ。
だがmozillaの開発メンバーであるJohn DaggetsはMinefieldというWebfontsを使えるバージョンをついに紹介した。いままでデザイナーはユーザーのPCにインストールされているフォントしかウェブサイトで利用することができず見出しに画像を利用したり画像置換を利用して好みのフォントをウェブサイトでは表示してきた。

それをネット上にあるフォントであれば自由に使えるようにし、どのウェブサイトでも同じフォントを表示できれば画像を利用したり画像置換を利用する必要はない。webfontsである。

webfontsの書き方

まずは基本のwebfontsの記述方法である。下記の例はCSS3.infoで紹介されているウェブサイトのソースである。

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
	  font-family: “Fertigo”;
	  src: url(http://www.taptaptap.com/Fertigo.otf)
	  	  format(”opentype”);
}

実際のwebfontsの画像

参考:CSS3.info
http://www.css3.info/font-face-in-the-wild/

Safariのサンプル

Safariはすでwebfontsをかなり前から先行実装している。Safariをインストールしてる方は実際にサンプルをみてみよう。ここではJeffrey ZeldmanのALAの記事にある画像を利用してみる。

1. まずは実際に表示される画面を画像でみてみよう。
   
2. 下記のURLをクリックしてほしい。Safariだと上記の画像と同じ画像が表示されるはずだ。
   http://www.alistapart.com/d/cssatten/nels.html

Firefoxでwebfontsをつかう

1. まずはJohn DaggetsがリリースしたMinefieldと呼ばれるFirefoxのtry-outのバージョンをダウンロードしてほしい。(残念ながらLinuxバージョンはまだない。)
2. 次にabout:configとURLボックスに入力してconfig画面を呼び出してほしい。
3. configの画面のリストからgfx.downloadable_fonts.same-site-origin.enabledをみつけfalseにしてもらいたい。
4. 
   http://www.alistapart.com/d/cssatten/nels.html
   
   を見るとFirefoxで（Minefield）でもwebfontsをレンダリングすることができる。

webfontsをFirefoxが実装するのは時間の問題だと思う。その他にも著作権の問題や日本語の場合はfontの読み込みに少し時間がかかるなど壁はまだある。ただ、少しづつwebfontsをはじめCSS3は近づいてきている。CSS3は5年も先と考えてるのは日本だけである。今のうちからCSS3に目をむけてインスピレーションを磨くことを忘れないようするべきだろう。

引用元：

A List Apart:
CSS @ Ten: The Next Big Thing
by H?kon Wium Lie
http://www.alistapart.com/articles/cssatten

Thanks !! Jeffrey Zeldman