SafariやFirefoxも正式対応！CSS3のウェブフォント(Webfonts)とは何か

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

2009.07.01 - 11:53

SafariやFirefoxも正式対応！CSS3のウェブフォント(Webfonts)とは何か

Safariに続きFirefoxもCSS3のウェブフォント(Webfonts)機能を正式採用しました。

最近動向が慌ただしいCSS3のウェブフォント(Webfonts)、@font-face機能。他にも詳しくまとめているサイトがありますが、自分用のメモとして、できるだけ端的にまとめてみたいと思います。

ウェブフォント(Webfonts)機能とは、CSSを使ってブラウザで任意のフォントを指定できる機能のことです。これまでもfontタグやfont-familyを使って指定することはできましたが、WindowsやMacintoshで共通で使えるフォントを指定するというのが原則でした。

しかし、CSS3のウェブフォント(Webfonts)機能は、フォントファイル自体をサーバに上げ、それを指定する仕組みであるため、普段我々が使っているTrueTypeやOpenType形式のフォントを使える点が大きく違います。

まずはSafari3.1〜やFirefox3.5〜などで、Ian Lynam氏とCraig Mod氏によるデモページをご覧ください。使われているフォントは、オランダのフォントファウンダリUnderwareによるものです。スクリプトフォントも自由自在、すごいですね。

主な利点をまとめてみました。

TrueTypeやOpenType形式のフォントに対応、ぐっと身近に
CSSを使って簡単に指定できる（→具体的なやり方はこのへんをどうぞ）
任意のフォントを使いたいだけのために画像化(gif、jpg、pngなど)する必要がない
任意のフォントを使いたいだけのためにFlash化(swf)する必要がない
テキストが選択できるのでコピペも容易
HTML的には画像ではなく純なテキストであるためSEOにもフレンドリー

…しかしながら普及までにはいくつか大きな問題を抱えているのが現状です。

1. 対応ブラウザの問題

2009.7.1時点の対応ブラウザリストです。ここで注意しなければいけない点は、一般ユーザーの多くが使っているであろうWindowsのInternet Explorerは、4.0から対応しているものの、Web Embedding Fonts Tool (WEFT)を使って独自規格の埋め込み用OpenType (EOT)を生成しなければならないため、TrueTypeやOpenTypeフォントが自由に使える他のブラウザと比べると1枚壁があります。

Windowsの、しかもInternet Explorerが完全な対応していないのであれば、現状そこまで必死になる必要はない…という感じでしょうか。SafariはMacユーザーに浸透はしていますが、Firefoxも含めて他のブラウザはまだまだ開発者向けです。

2. ライセンスの問題

フォントファイル自体をサーバに上げ、フォントを埋め込むということになれば、フォントファンダリ側の使用許諾書(EULA)にも影響が出てきます。それを許可するのか、別途契約となるのか。

ウェブフォント(Webfonts)に関してオープンに賛同しているファウンダリもありますが、難色を示しているファウンダリも多いのが現状です。フォントファイルがサーバにアップされることでセキュリティの面で大丈夫なのか、そもそも購入して初めてフォントデータを渡しているのに、間接的に購入をしてない人にまで使われるのはいかがなものか…ということですね。
またフリーフォントの場合であっても、念のため制作者に確認をとる必要がでてきそうです。

そこでライセンスの問題に関して解決の糸口となるかもしれないのが、TypeKitと呼ばれるサービスです。詳しくは長谷川恭久氏のTypeKitから始まるウェブ文字革命の記事を参照していただきたいですが、要するに個々のサーバにフォントデータをアップするのではなく、外部のサーバで管理し、それをJavascript等を使って埋め込むことを可能にする画期的なサービスです。
順次関係団体と協議を進めているようですが、こちらも難色を示しているファウンダリがあるようです。