このページの本文へ

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

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

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

Web Directions East

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

STEP.5:クロスブラウザーに対応させる

 ここまでくればほぼ完成だ。最後に仕上げとして、Firefox/Opera/Safari用のCSSの記述と、IE用のCSSの記述をまとめよう。


/* IE */
@font-face {
font-family: Makiba;
src: url(MakibaFont13.eot);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: Makiba;
src: url(MakibaFont13.ttf) format("truetype");
}


 上記のCSSを適用した簡単なHTMLを作成し、各ブラウザー(Firefox/Safari/Opera/IE)で実際に表示したのが以下の画面だ。IE6のみ、アンチエイリアスが効いていないため若干の違いはあるものの、いずれのブラウザーでも「まきば」で正しく表示されていることが確認できる。

Firefox 3.5.3 Safari 4.0
Firefox 3.5.3Safari 4.0
Opera 10.5.8 IE6
Opera 10.5.8IE6

 完成したHTMLファイルとフォントは以下のURLで公開している。また、HTMLとフォントをまとめたZIPファイルも用意したので、実際にダウンロードして自分の環境でも試してほしい。


Webフォントを利用する際の注意点

 冒頭で紹介したとおり、さまざまなメリットがあるWebフォントだが、利用にあたってはいくつか注意したい点もある。


■ライセンスを確認する

 Webフォントを利用する際は、事前にフォントのライセンス(使用許諾契約の内容)を必ず確認すること。疑問な点があれば、フォントメーカーや作者などの権利者に問い合わせるなどして解決しておこう。


■日本語フォントのファイルサイズ

 日本語のWebサイトでWebフォントを利用する際に一番のネックとなるのが、フォントのファイルサイズだ。次の画面は、欧文フォントと日本語フォントのファイルサイズを比べたものだが、「Verdana.ttf」の184kbに対して、「Makibafont13.ttf」は1.6MBと、なんと10倍近くになっている。

フォントの比較
Verdanaフォントの場合「まきば」フォントの場合

 フォントのダウンロードが終わるまでの間、ブラウザーはデフォルトのフォントによる代替表示、もしくは空白の状態になる。日本語フォントの利用は最低限にとどめるとともに、少しでもフォントのダウンロードを高速化するために、「30分でできる!Webサイトを高速化する6大原則」を実践し、Webサイト全体のパフォーマンス改善に取り組むことをおすすめする。


■Operaのバグ

 Mac版の「Opera 10.00」では、フォントによっては正しく表示されないバグがあることが確認された(「M+FONT」で確認、2009年09月16日現在)。いずれ改善されるだろうが、Mac版のOpera 10.0をターゲットブラウザーに含める場合は留意しよう。

参考:Oli Studholm「Problem with Opera 10 」
 http://oli-studio.com/test/font-face/ascii.html


Web Professionalトップへ

Web Professionalトップページバナー

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

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

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

ランキング