このページの本文へ

画像化不要で好きなフォントが使えるワザ

IEにも対応!10分でできるWebフォント実装法

2009年10月08日 10時00分更新

Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

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)
マイクロソフト製の変換ツール「Web Embedding Fonts Tool(WEFT)」

 そこで、より手軽な「ttf2eot」というWebサービスをオススメする。ttf2eotは、変換したいTTFファイルを「選択」して「Convert to .eot」ボタンを押すだけで、EOTファイルに変換してくれる。

ttf2eot
EOT変換に便利なキラーツール「ttf2eot」

使いたいフォントがOTF形式の場合は?

 フォントによってはTTF形式ではなく、OTF形式しか用意されていない場合もある。IE以外のモダンブラウザーではOTF形式の読み込みもサポートしているため問題ないが、IEで読み込めるのはEOTだけだ。そこで、OTF形式のフォントの場合は、「Free online font converter」というWebサービスを利用していったんTTF形式に変換しよう。TTF形式のファイルができたら、あとは前述の「ttf2eot」でEOTファイルに変換すればOKだ。

Free online font converter
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);
}


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング