2010.5.6 Thursday - 09:00

Webで任意の書体を使う方法まとめ【2011年12月更新版】

キーワード

ウェブで任意の書体を使う方法をまとめてみました。@font-faceが登場して以降、盛り上がりをみせているWebフォント事情。すでに存在していたEOT、最近登場したWOFFや、再び注目されることとなったSVG、JavascriptやFlashと組み合わせたCufónやsIFRなどなど、まさに技術の日進月歩です。

フォントを任意の形式に変換する際は、使用許諾の面で問題がないかどうか必ず確認をしてください。また海外のジェネレータ・コンバートできるサイトは、日本語のようなファイルサイズの大きいフォントデータを想定していない可能性があるため、できるだけ使用を避けるようにしてください。

更新履歴
2011/12/22 … ブラウザのサポート情報を更新
2010/11/25 … Chrome、iOS (Mobile Safari)の情報を更新

TTF / OTF (@font-face)

Safari 3、Firefox 3.5で対応が開始され、開発者や技術者の間で一気に話題になったのが、TrueTypeやOpenTypeをそのまま使った@font-face。CSSへの記述だけで対応できるため、今後標準化され普及していくものと思われましたが、フォントファウンダリ側から生のフォントデータを使うことに難色を示したため、後述のWOFFへとその座を受け渡すことになりそうです。IEは未対応ですが、後述のEOTと組み合わせ、条件分岐処理を行う記述方法で各種ブラウザに対応させます。

EOT / EOT Lite (@font-face)

最近になって話題になっているWebフォントですが、実はMicrosoftにはIE4からOpenTypeファイルを埋め込む後述のEOT (Embedded OpenType)という技術が既に存在しています。Microsoftが配布している、Web Embedding Fonts Tool (WEFT)というツールをダウンロードし、EOTファイルを生成、CSS側で@font-faceタグで指定すれば完了。ただしIE以外のブラウザは非対応であるため、前述のBulletproof@font-face syntaxで条件分岐処理を行う必要があります。
また2009年夏頃Ascender Corporationが、変換ツールと共にWebの標準化団体「W3C」に提唱したフォーマット“EOT Lite”は、結局受け入られずお流れとなりました。
→ IE で Web Fonts を使う方法 (eot ファイルの作り方) | ヨモツネット
→ Web Embedding Fonts Tool (WEFT)
→ EOTFast（簡単にEOT形式を生成できるツール）

WOFF (@font-face)

WOFFとはWeb Open Font Formatの略称で、今後Webフォントの標準フォーマットとなることが確定しています。Firefox 3.6が初めて対応をしたブラウザで、Chromeは6から対応、Operaは11から、IEは9から対応。WOFFへの変換は、ジェネレータサイト等から簡単に変換可能。詳しくは当サイトの関連記事をご覧ください。
→ WOFFコンバータ by 武蔵システム
→ 次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？
→ Firefox 3.6でサポートされたWOFFを試してみる

SVG / SVGZ

SVGとは、JPEGやGIFと同様、数多くある画像フォーマットの1つで、Adobe系の制作ソフトがすでに対応しています。Webの標準化団体「W3C」が勧告したのはなんと2001年。半分忘れさられていたSVGが、突如注目されだしたのには、急速にスマートフォンのシェアを奪うiPhone/iPadが関係しています。2010年5月現在、iPhoneやiPadにインストールされているモバイル版Safariは、TTF or OTF (@font-face)やWOFFには非対応ですが、唯一SVG形式は対応してるためです。【追記】iOS 4.2にてTTF形式に対応しました。
またSVGZとは、SVGの圧縮版でファイルサイズが小さくなります（※iPhoneには未対応？）。
→ Web Fonts で SVG Fonts を利用する | ヨモツネット
→ The iPad and SVG fonts in Mobile Safari | Ralf Herrmann’s Typography Weblog

【2011/12/22現在のまとめ】
今後のWebフォント標準フォーマットWOFFを使えばとりあえず問題なし。
ただしIE8以下用にはEOT、旧バージョンのSafariやiOS用にTTF・OTFがあるとよいかも。

…ちなみにWebフォント以外にもJavascriptやFlashと組み合わせた方法があります。ここからは参考までに。

Cufón

http://cufon.shoqolate.com/
読み方はクーフォン。通常のフォントファイルをJavaScriptファイルに変換し、そのJavascriptファイルからテキストを任意のフォントで置き換える仕組み。Cufón用のフォントファイルは、ジェネレータから簡単に変換可能。サーバサイドの知識は不要、基本的にはHTMLタグベースで置き換えます。ある程度の理解があるウェブデザイナーならば導入自体は難しくないですが、テキストが選択不可で、そのままではaタグが使えないなどのデメリットがあります。
→ 新たな画像置換スクリプト「Cufon」
→ Cufonの使い方 – Netch

Typeface.js

http://typeface.neocracy.org/
上述のCufónと比較されることが多いTypeface.js。TrueTypeフォントをSVGフォントに変換しJavascriptを用いて設置をします。変換はジェネレータから簡単にできます。ただし、まだまだ発展途上であることが否めず、ブラウザザポートがいまいち不安定となっています。
→ [JS]フォントを使用した画像のように、テキストを自動変更するスクリプト -typeface.js | コリス

sIFR

http://wiki.novemberborn.net/sifr/
sIFRとは“Scalable Inman Flash Replacement”の略称で、HTMLのテキストをJavascriptによって、Flash (swf)に置き換える仕組み。良くも悪くもFlashを使うところが特徴となっていますが、テキストは選択が可能である点がポイント高いです。sIFRフォントがダウンロードできるサイトもいくつかありましたが、ほとんどは閉鎖されており、任意のフォントを使うには.flaファイルを使えば可能。こちらも基本的にはHTMLタグベースで置き換えるため、ある程度の理解があるウェブデザイナーならば導入自体は難しくありません。
→ 選択可能なアンチエイリアス文字を出力する『sIFR 2.0』導入メモ – Archiva
→ lush life* – sIFRの設置方法

FLIR

http://facelift.mawhorter.net/
FLIRとは“Facelift Image Replacement”の略称。対抗のsIFRがFlashを使うのに対して、こちらは通常の画像を埋め込む仕組み。設置自体はそこまで難しくないですが、サーバを介してるためPHPの知識が若干必要で、埋め込まれた画像は、通常の画像扱いになるためテキストは選択不可能です。技術的には、どちらかと言えばCufónに近いと言えます。

以上を下記の表にまとめてみました（【追記】公開後一部訂正）。現状それぞれがそれぞれの対応となっているため、全てにおいて都合の良いとされる技術は今のところ存在しません。この煩わしさを対処したのがWebフォントサービスです。サーバ側で一括管理するため、逐一気にする必要がありません。
→ 海外のWebフォントサービスまとめ

TTF / OTF EOT /

EOT Lite

 WOFF SVG Cufón Typeface.js sIFR FLIR
IE 4 – 5 × ○ × × × × △*1 ○
IE 6 – 7 × ○ × × ○ ○ ○ ○
IE 8 × ○ × × ○ × ○ ○
IE 9+ × ○ ○ × ○ – ○ ○
Firefox 3.5 ○ × × × ○ ○ ○ ○
Firefox 3.6 ○ × ○ × ○ ○ ○ ○
Firefox 3.7+ ○ × ○ ○ ○ ○ ○ ○
Safari 3.1 – 5 ○ × × ○ ○ ○ ○ ○
Safari 5.1+ ○ × ○ ○ ○ ○ ○ ○
Chrome 4 – 5 ○ × × ○ ○ – ○ ○
Chrome 6+ ○ × ○ ○ ○ ○ ○ ○
Opera 10 ○ × × ○ ○ △ ○ ○
Opera 11+ ○ × ○ ○ ○ △ ○ ○
iOS 3.x – 4.0 × × × ○ ○ ○ × ○
iOS 4.2+ ○ × × ○ ○ ○ × ○
iOS 5+ ○ × ○ ○ ○ ○ × ○
テキスト選択 ○ ○ ○ △*2 × ○ ○ ×
SEO ◎ ◎ ◎ ○ ○ ○ ○ ○
CSSとの連係 ○ ○ ○ △ △ △ △ △
導入難易度 やや簡単 普通 普通 面倒 やや面倒 やや面倒 やや面倒 面

*1 Adobe® Flash Player 6以上が必要
*2 ブラウザによって不具合がある可能性があります。

PAGE TOP