HTML5&CSS3入門 第4回 @font-face（ウェブフォント）の利用
作成日
8 March 2011
ページ ツール
必要条件
この記事に必要な予備知識
サンプル作成のツールとしてDreamweaverを使います（CS5以降が必要。CS5ではアップデータ11.0.3を適用し、「HTML5 パック for Dreamweaver CS5」をインストールする必要があります。
※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。
ユーザーレベル
初級
必要な製品
- Dreamweaver CC (Download trial)
サンプルファイル
- HTML5Pack004_sample.zip (4996 KB)
これまでの記事では、CSS3で新たに登場する border-radius と background を利用し、ブロックへの装飾を行いました。今回は、@font-face規則という、CSS3で新たに登場するフォント適用の仕組みについて紹介します。
前回の記事では、次のようなHTML文書、CSSを作成しました。
＜HTML＞
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>CS5 Web Premium について</title>
6. <link rel="stylesheet" type="text/css" href="styles.css">
7. <!--[if lt IE 9]>
8. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
9. <![endif]-->
10. </head>
11. <body>
12.
13. <section class="section-main">
14. <hgroup>
15. <h1>CS5 Web Premium</h1>
16. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
17. </hgroup>
18. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p>
19. <section class="section-sub">
20. <h3>WEBデザイン</h3>
21. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p>
22. </section>
23. <section class="section-sub">
24. <h3>インタラクティブデザイン</h3>
25. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p>
26. </section>
27. </section>
28.
29. </body>
30. </html>
＜CSS＞
1. section.section-main{
2. /* part 2 */
3. border:3px solid #006600;
4. -webkit-border-radius:20px;
5. -moz-border-radius:20px;
6. border-radius:20px;
7. /* part 3 */
8. background:url(bg_01_tl.png) no-repeat,
9. url(bg_01_tr.png) no-repeat 100% 0,
10. url(bg_01_top.png) repeat-x,
11. url(bg_01_btm2.png) repeat-x 8px 100%,
12. url(bg_01_btm.png) repeat-x 0 100%,
13. #669900 url(bg_01_mdl.png) repeat-x;
14. padding:40px 80px 150px;
15. }
16.
17. /* other setting */
18. body{
19. font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
20. fontsize:14px;
21. line-height:1.5;
22. }
23.
24. hgroup{
25. display:block;
26. text-align:center;
27. margin:0 0 1.6em;
28. }
29. hgroup h1{fontsize:257%; margin:0;}
30. hgroup h2{fontsize:114%; margin:0;}
31. h3{fontsize:114%; margin:.6em 0;}
32. p { margin:0 0 .6em;}
ウェブフォントとは、CSSのfont-familyプロパティを利用し、Webページ上のテキストに対して、どんなフォントでも適用できる仕組みのことです。これまでは、「ＭＳ Ｐゴシック」や「ヒラギノ角ゴシックW3」などのように、限られた範囲でしかfont-familyプロパティを利用できませんでした。しかし、CSS3の@font-face規則の登場により、フォントファイルさえあればどんなフォントでもCSSで適用できるようになります。
※フォントファイルは、Web上からダウンロードするなどして手軽に入手／利用することができます。しかし、ウェブフォントを利用するということは、フォントファイルをサーバーに置くことになり、フォントファイル自体の再配布に近い状態となってしまいます。そのため、フォントのライセンスに注意しなくてはなりません。市販のフォントはもちろん利用不可能ですが、著作権フリーであっても再配布を禁止しているフォントは多数あります。ウェブフォントに利用する時にはフォントのライセンスに気をつけましょう。
なお、この他のウェブフォント用に利用可能なフォントファイルを入手するには、下記を参考にしてください。
- 欧文フォント : Fontsquirrel
- 和文フォント : WebFonts として利用できるフリーの和文フォント | ヨモツネット
TTF形式そのままでも利用できますが、ウェブフォントとして利用するためにはWeb専用の形式変換します。Web専用の形式にすることで、ファイル容量が減る、第三者によりダウンロードされデスクトップ上での二次利用を防げるなどの利点があります。また、後述するようにTTF形式をサポートしていないブラウザーもあるからです。
現在、「WOFF」というウェブフォント専用形式のフォント仕様が策定途中で、最新ブラウザの多くはWOFF形式に対応しています。しかし、Internet Explorer 4～8は「EOT」という形式のみにしか対応していません。また、ブラウザによってはTTFとOTFのみにしか対応していません。下記は主なブラウザーのフォント形式対応状況です。
| TTF | OTF | EOT | WOFF | SVG | |
|---|---|---|---|---|---|
| Internet Explorer 4～8 | × | × | ○ | × | × |
| Internet Explorer 9β | × | × | ○ | ○ | × |
| Firefox 3.5 | ○ | ○ | × | × | × |
| Firefox 3.6+ | ○ | ○ | × | ○ | × |
| Opera 10+ | × | × | × | × | ○ |
| Chrome 4～5 | ○ | ○ | × | × | ○ |
| Chrome 6+ | ○ | ○ | × | ○ | ○ |
| Safari 3.1+ | ○ | ○ | × | × | ○ |
| Safari Mobile (iOS 4.0) | × | × | × | × | ○ |
| Safari Mobile (iOS 4.2) | ○ | ○ | × | × | ○ |
※意外かもしれませんが、Internet Explorerはバージョン4からウェブフォントに対応しています。これは、CSS2にウェブフォントが含まれており、当時のInternet Explorerがこれを元に実装したためなのです。その後、CSS2.1ではウェブフォントはいったん削除されました。そしてウェブフォントはCSS3で再登場し、2009年頃よりFirefoxやSafariなども対応してきたという経緯があるのです。
対応表から分かるように、すべてのブラウザーやそのバージョンが対応しているフォント形式はありません。また、ウェブフォント専用形式のWOFFに対応しているのはごく最新のブラウザーに限られています。そこで今回は、先ほどダウンロードしたTTFをWOFFとEOTに変換し、未対応のブラウザー用にTTFをそのまま利用することにします。そのため、合わせて3種類の形式のフォントファイルを用意します。
フォントの形式を変換するには、「@FONT-FACE GENERATOR」のようなWebサービスを利用する方法もありますが、より柔軟に対応するためにここではオフラインのツールを用いた方法を紹介します（もちろん、Webサービスを利用してフォント形式を変換しても問題なくウェブフォントとして利用できるでしょう）。
TTFをWOFFに変換する
FirefoxやChromeでフォントを利用するために、先ほどダウンロードしたTTF形式のフォントをWOFF形式に変換します。TTFをWOFFに変換するためには「sfnt2woff」を利用します。
WOFF形式への変換は「sfnt2woff」にTTF形式のフォントをドラッグ&ドロップするだけで完了します。
TTFをEOTに変換する
Internet Explorer 8以下でフォントを利用するために、先ほどダウンロードしたTTF形式のフォントをEOT形式に変換します。TTFをEOTに変換するためには「EOTFast」を利用します。残念ながらこのツールはWindows用のプログラムしか提供されていないため、Macユーザーの方はBoot Campなどを経由して利用してください。
EOT形式への変換は「EOTFast」にTTF形式のフォントをドラッグ&ドロップするだけで完了します。
TTF形式のフォントファイルを参照させる
先ほどまでに用意した3種類（TTF、WOFF、EOT）のフォントをサンプルの大見出し（「CS5 Web Premium」の部分）へ適用してみましょう。フォントを参照するために、以下のように@font-face規則を記述します。まずはTTFのみを読み込んでみましょう。
1. @font-face {
2. font-family: 'font1';
3. src: url('/Chunk.ttf');
4. }
@font-face 規則内のfont-familyプロパティには自由な名前を付けます。ここでは「font1」としました。srcプロパティでは、フォントファイルを参照します。「url( *** )」にフォントファイルのパスを指定します（background-imageプロパティなどの指定と同様です）。
合わせて、見出しなどの要素にfont-familyプロパティで読み込んだフォントを適用します。font-family の値は、@font-face内で付けた名前になるようにします。
1. @font-face {
2. font-family: 'font1';
3. src: url('/Chunk.ttf');
4. }
/* <中略> */
5. hgroup h1{
6. font-family:'font1';
7. fontsize:300%;
8. margin:0;
9. }
これにより、ChromeなどのTTF形式に対応しているブラウザーでウェブフォントが有効になります。
なお、オープンソースのフォントであっても、ほとんどの場合では著作権が存在します。CSSのコード内にコメントでライセンスや著作元などを表示しておくと安心です。例えば、フォント「Chunk」は「SIL Open Font License」というライセンスのもと「http://www.theleagueofmoveabletype.com/fonts/4-chunk」で提供されています。ですので、今回は例として次のようにライセンス情報を書き加えました。
1. @font-face {
2. font-family: 'font1';
3. src: url('/Chunk.ttf');
4. /*
5. * Chunk licensed under the SIL Open Font License
6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk
7. */
8. }
/* <中略> */
9. hgroup h1{
10. font-family:'font1';
11. fontsize:300%;
12. margin:0;
13. }
WOFF形式のフォントファイルを参照させる
ここまでの操作でウェブフォントを適用することができました。しかし、TTFよりもWOFF形式の方がファイル容量が軽量です。例えば、今回利用しているChunkの場合、TTF形式では31KB、WOFFに変換後は18KBです。日本語フォントの場合、容量の差はさらに大きくなります。
WOFF形式のフォントをTTF形式のものよりも優先的に適用できるようにCSSのコードを書き換えてみましょう。@font-face規則内のsrcプロパティに対して、「, (カンマ)」区切りで、優先したい順に複数のパスを並べます。このとき、そのフォントの形式を「format(***)」で合わせて併記します。
1. @font-face {
2. font-family: 'font1';
3. src: url('fonts/Chunk.woff') format('woff'), url('fonts/Chunk.ttf') format('truetype');
4. /*
5. * Chunk licensed under the SIL Open Font License
6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk
7. */
8. }
/* <中略> */
9. hgroup h1{
10. font-family:'font1';
11. fontsize:300%;
12. margin:0;
13. }
これにより、ChromeやFirefoxなどのWOFF形式に対応しているブラウザーはTTFより軽量で高機能なWOFF形式のフォントをダウンロードして利用します。一方、SafariなどWOFF形式には対応していないブラウザーはWOFF形式の記述は無視し、TTF形式のフォントをダウンロードし利用します。
なお、フォント形式に対するformat()の値は、次のように対応しています。
| 形式 | フォントの拡張子 | format()の値 |
|---|---|---|
| Web Open Font Format | .woff | "woff" |
| TrueType | .ttf | "truetype" |
| OpenType | .ttf, .otf | "opentype" |
| TrueType with Apple Advanced Typography extensions | .ttf | "opentype" |
| Embedded OpenType | .eot | "embedded-opentype" |
| SVG Font | .svg, .svgz | "svg" |
Internet Explorer用にEOT形式のフォントファイルを参照させる
ここまでWOFF形式やTTF形式について触れてきましたが、Internet Explorer 8以下はそれらのフォント形式に対応していません。しかし、EOT形式には対応しています。そのため、Internet Explorer には EOT形式のフォントを読み込ませるようにすることで、ウェブフォントを有効にすることができます。
Internet Explorer 8以下に的確にEOTフォントを読み込ませるためには、font-familyプロパティの先頭にEOTフォントへの参照を追加します。この時、拡張子「.eot」の末尾に「?」をつけ、さらにformat()の値に本来指定すべきでない値（なんでもよい）を指定します。今回は「format('oldIE')」としました。末尾の「?」と「format('oldIE')」は、Internet Explorer 8以下でEOTフォントのみを利用させるためのトリックです。
1. @font-face {
2. font-family: 'font1';
3. src: url('fonts/Chunk.eot?') format('oldIE'),
url('/Chunk.woff') format('woff'),
url('/Chunk.ttf') format('truetype');
4. /*
5. * Chunk licensed under the SIL Open Font License
6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk
7. */
8. }
/* <中略> */
9. hgroup h1{
10. font-family:'font1';
11. fontsize:300%;
12. margin:0;
13. }
これにより、Internet Explorer 8以下は最初のurl()の値を読み、「?」以降はクエリー文字として無視します。一方、その他のブラウザー（Internet Explorer9やFirefoxなど）は、各々に対応しているsrcの値を読み込むことになります。例えば、Internet Explorer 9は'oldIE'というフォーマットには対応していないため、2番目に指定されたwoffを読み込みます。これにより、古いInternet Explorerを含めた多くのブラウザーでウェブフォントが有効になります。
※この時点では特に解説していませんが、上図では一時的にInternet Explorerでborder-radiusやmultiple-backgroundなどのCSS3を疑似的に有効にしています。Internet ExplorerでCSS3を擬似的に扱う方法については次回以降に解説する予定です。
これにより、Internet ExplorerはEOTを、WOFF対応ブラウザーはWOFFを、それ以外のブラウザーはTTFを読み込むことができるようになりました。もちろん、Dreamweaverのライブビューでも表示することができます。
複数のウェブフォントを利用する
ウェブフォントでは複数のフォントを利用することもできます。ここでは、大見出しの副題「効果的なWebサイト～」の部分に和文フォント「モトヤLマルベリ3（MTLmr3m.ttf）」を適用してみましょう。
MTLmr3m.ttfについてもここまでと同様の流れでWOFF、EOT形式をそれぞれ用意し、@font-faceルールでそれぞれのフォントを参照します。フォントの名前（font-family）は「font2」としました。
1. @font-face {
2. font-family: 'font1';
3. src: url('Chunk.eot'?') format(' embedded-opentype'),
url('../fonts/Chunk.woff') format('woff'),
url('../fonts/Chunk.ttf') format('truetype');
4. /*
5. * Chunk licensed under the SIL Open Font License
6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk
7. */
8. }
9.
10. @font-face {
11. font-family: 'font2';
12. src: url('fonts/MTLmr3m.eot?') format(' embedded-opentype'),
url('fonts/MTLmr3m.woff') format('woff'),
url('fonts/MTLmr3m.ttf') format('truetype');
13. /*
14. * MTLmr3m licensed under the Apache License
15. * https://android.git.kernel.org/?p=platform/frameworks/base.git;a=commit;h=4234d40eae54ad9126fbc4b61cbbe8dc78d282bc
16. */
17. }
/* <中略> */
18. hgroup h1{
19. font-family:'font1';
20. fontsize:300%;
21. margin:0;
22. }
23. hgroup h2{
24. font-family:'font2';
25. fontsize:114%;
26. margin:0;
27. }
ただし、和文フォントは文字数が多いためほとんどの場合にファイル容量が1MBを超えてしまいます。そのため、和文フォントの利用に関しては1書体までとしておくといいでしょう。
まとめ
ウェブフォントを利用すれば、Webページでのテキストの表現は大きく広がります。これにより、テキストを画像化するといった手法を減らすことができますし、表現が乏しかったCMSやブログなどから動的に出力されるテキストに対して、より豊かな表現を付与することができるでしょう。
海外では既にウェブフォントを利用しているWebサイトも多く、日本国内でも徐々にウェブフォントを利用したWebサイトが登場し始めています。これをきっかけにウェブフォントを利用してみてはいかがでしょうか。
More Like This
- jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット
- jQuery Mobileファーストステップガイド
- Dreamweaver＋SVG：SVGのキホン
- Dreamweaver CS5.5 マスターシリーズ 第3回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その2
- Introduction to media queries
- スマートフォン時代のWebサイト制作 第1回 スマートフォン対応の重要性とその方法
- HTML5&CSS3入門 第1回 HTML5のベースと文章マークアップ
- What's new in Dreamweaver CS5.5
- HTML5&CSS3入門 第2回 HTML5文書へのCSS読み込みと、CSS3 : border-radiusの利用
- HTML5&CSS3入門 第5回 text-shadowによるテキストの装飾