2009.7.1 Wednesday - 11:53

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

キーワード

こちちの記事は2009年に書かれた記事であるため、一部古い情報が含まれています。最新のWebフォント(Webfonts)情報はこちらをご覧ください。

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

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

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

しかし、CSS3のWebフォント機能は、フォントファイル自体をサーバに上げ、それを指定する仕組みであるため、普段我々が使っているTrueTypeやOpenType形式が使える点が大きく違います。 ※Webフォント専用のWOFF形式を使うのが一般的です。

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

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

  • TrueTypeやOpenType形式のフォントに対応、ぐっと身近に ※現在はWOFF形式を使うのが一般的です
  • 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)にも影響が出てきます。それを許可するのか、別途契約となるのか。

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

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

3. 日本語フォントの問題

言うまでもなく、欧文のフォントはデータが軽いですが、日本語のフォントは文字数が多いためデータが重いです。そうなると埋め込むことはできたとしても、ダウンロードに時間がかかってしまう問題があります。そのため、日本語など2バイトフォントでの使用は現実的に難しいでしょう。 ※ダイナミックサブセッティング（ページアクセス時に瞬時に使われている文字を認識し、必要最低限のフォントファイルをダイナミックに生成する技術）により、この問題は解決しています。

という感じで現状をまとめてみました。

PAGE TOP