画像化不要で好きなフォントが使えるワザ
IEにも対応！10分でできるWebフォント実装法
2009年10月08日 10時00分更新
STEP.2：フォントを読み込む（Firefox/Safari/Opera編）
Firefox/Safari/Operaは、TTF（True Type Font）およびOTF（Open Type Font）形式の読み込みに対応している。先ほどダウンロードした「まきば」のフォントファイルは、拡張子からも分かるようにTTF形式なのでそのまま利用できる。フォントは、CSSに以下のような @font-faceリンクを追加すれば読み込める。src: url() の url() 内の記述がフォント名（TTFファイルの名前）を表している。
@font-face {
font-family: Makiba;
src: url(MakibaFont13.ttf) format("truetype");
}
なお、フォントファイルの読み込みには時間がかかるので、上記の記述はCSSファイルの上部に記述し、ブラウザーになるべく早く読み込ませよう。
STEP.3：EOTファイルを作る
IEでWebフォントを使うには、一般的なTTF／OTF形式ではなく、独自のEOT（Embedded Open Type）形式のフォントを用意する必要がある。マイクロソフトが提供する無料ツール「Web Embedding Fonts Tool（WEFT）」を使えばTTFからEOTへの変換が可能だが、WEFTは使い勝手が非常に悪く、1つのフォントを変換するのに膨大な時間がかかってしまう。
 |
|---|
| マイクロソフト製の変換ツール「Web Embedding Fonts Tool（WEFT）」 |
そこで、より手軽な「ttf2eot」というWebサービスをオススメする。ttf2eotは、変換したいTTFファイルを「選択」して「Convert to .eot」ボタンを押すだけで、EOTファイルに変換してくれる。
 |
|---|
| EOT変換に便利なキラーツール「ttf2eot」 |
使いたいフォントがOTF形式の場合は？
フォントによってはTTF形式ではなく、OTF形式しか用意されていない場合もある。IE以外のモダンブラウザーではOTF形式の読み込みもサポートしているため問題ないが、IEで読み込めるのはEOTだけだ。そこで、OTF形式のフォントの場合は、「Free online font converter」というWebサービスを利用していったんTTF形式に変換しよう。TTF形式のファイルができたら、あとは前述の「ttf2eot」でEOTファイルに変換すればOKだ。
 |
|---|
| OTFをTTFに変換する「Free online font converter」 |
●Free online converter
http://onlinefontconverter.com/
STEP.4：IEにフォントを読み込ませる
EOTファイルが用意できたら、IEに読み込ませるためのCSSを追加する。CSSの記述自体はFirefox/Safari/Operaの場合とほぼ同じだが、1点だけ違うのは、format("eot") の指定がないこと。EOT形式にしか対応しないIEはformatを理解できないので、記述は不要だ。
@font-face {
font-family: Makiba;
src: url(MakibaFont13.ttf.eot);
}
