インストールせずに、好きなWeb Fontsを使おうWeb Fontsの歴史と使い方(1)

WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます

» 2011年09月28日 00時00分 公開

WebFontsとは

 WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。

 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9/Firefox 6/Chrome 12/Opera 11.5/Safari 5.1 で動作確認済みです。

 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。

 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただしく利用しましょう。

 WebFontsの指定には、@font-faceを利用します。@font-faceは主要なブラウザ(IE 4+、Firefox 3.5+、Safari 5+、Chrome 4+、Opera 10+)でサポートされています。また@font-faceはCSS Fonts Module Level 3で定義されています。

 サポートされているフォントファイルのフォーマットが以前は限られていましたが、最近ではWOFF(Web Open Font Format)が主要なブラウザ(IE 9+、Firefox 3.6+、Safari 5.1+、Chrome 6+、Opera 11.10+)でサポートされています。

 WOFFはWOFF File Format 1.0で定義され、2011年8月4日にW3C勧告候補(Candidate Recommendation)となりました。

 最近では日本語が利用可能なWebFontsのサービス開始や、プレスリリースが相次ぎました。

 このようにWebFontsを利用する環境は整ってきました。これまではWebFontsで利用できる日本語フォントは少なかったのですが、今後はこういったサービスを利用することで、簡単にWebFontsを利用できるようになります。

 今回はWebFonts自体の説明と、簡単な使い方をご紹介します。

WebFontsとフォントフォーマットの歴史

 WebFontsとフォントフォーマットのこれまでの歴史を簡単に紹介します。

 WebFontsの仕様はCSS2に含まれていましたが、CSS2.1では除外され、CSS3で再度検討されています。CSS2 Fontsの仕様には、以下の内容がありましたが、CSS2.1 Fontsからは削除されています。

15.1 Introduction

CSS2 improves client-side font matching, enables font synthesis and progressive rendering, and enables fonts to be downloaded over the Web. These enhanced capabilities are referred to as 'WebFonts'

 WebFontで利用できるフォントファイルのフォーマットには、以下のような形式があります。

  • TTF(True Type Font)
  • OTF(Open Type Font)
  • EOT(Embedded OpenType)
  • SVG Font(Scalable Vector Graphics Font)
  • WOFF(Web Open Font Format)

 以前はEOTはIEのみがサポートし、TTF/OTFは主にChromeやFirefoxがサポートしていました。

 EOTはMicrosoftが中心となり、標準化を進めようとしていましたが、うまくいきませんでした。そこにMozillaが中心となりWOFFの提案を行いました。WOFFは他のベンダからも賛同を得て、W3CにWebFonts Woking Group(WebFonts Working Group public page - W3C)が設立されました。そしてWebFonts Working GroupでWOFFの仕様策定が進められ、上述の通りWOFFはW3C勧告候補になりました。

 WOFFには以下のような特徴があります。

  • 圧縮されていてサイズが小さい
  • ライセンス情報をメタデータに含めることができる

 フォントをダウンロードして利用することを考えると、なくてはならない特徴です。WOFFは多くのモダンブラウザでサポートされ、今後WebFontsで利用するフォントの中心的なフォーマットになるでしょう。

WebFontsの使い方

 WebFontsの使い方は簡単です。

 @font-faceでフォントファイルを指定し、font-familyにfont名を定義し、formatにフォーマットを定義します。以下のサンプルコードではフォントファイルが、サーバにアップロードされている前提で記載します。

@font-face {
  font-family: 'myfont';
  src: url('myfont.woff') format('woff');
}

 定義したfont名をfont-familyで指定します。

h1{
   font-family: 'myfont';
}

 format に指定できる値は以下のとおりです(4.3 Font reference: the src descriptor - CSS Fonts Module Level 3 - W3Cより)。

String Font Format Common extensions
"woff" WOFF (Web Open Font Format) .woff
"truetype" TrueType .ttf
"opentype" OpenType .ttf, .otf
"embedded-opentype" Embedded OpenType .eot
"svg" SVG Font .svg, .svgz

 これでWebFontsを利用できます。1つのフォントで複数のフォーマットを指定する場合は、@font-faceのsrcプロパティで複数のフォーマット(urlとformatの組み合わせ)をカンマ区切りで定義します。先に記述されているフォーマットが優先されます。

@font-face {
  font-family: 'myfont';
  src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');
}

 複数のフォントを定義する場合は、@font-faceを複数定義します。

@font-face {
  font-family: 'myfont1';
  src: url('myfont1.woff') format('woff');
}
@font-face {
  font-family: 'myfont2';
  src: url('myfont2.woff') format('woff');
}

 これら記述方法で、多くのケースは対応できると思いますが、IE8以下のブラウザでEOTファイルを利用したフォントを表示させるためにはもう一工夫必要です。具体的には@font-faceを以下のように定義します。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

 この GraublauWeb.eotという指定で、IE8以下のブラウザでは以降をクエリーストリングとして解釈し、無視します。それ以外のブラウザではformat('eot')という誤ったフォーマット指定のため、最初の指定は無視されます。EOTファイルの正しいフォーマット指定は「embedded-opentype」となります。

 これはGoogle Chrome 開発チームに所属し、jQueryコミュニティのメンバーでもある Paul Irish さんのBlogで紹介されていた手法です。サンプルコードはエントリから引用させていただきました。英語になりますが、このエントリでは@font-faceに関する様々な情報が記載されています。

まとめ

 今回はWebFontsの歴史と、使い方を簡単に紹介しました。

 これまでは日本語フォントが少なかったため、利用シーンがあまりなかったかもしれませんが、フォントプラスがスタートし、モリサワからクラウドフォントサービス「TypeSquare(仮称)」の発表がありました。今後WebFontsで利用できる日本語フォントは増えていくでしょう。

 WebFontsは多くのモダンブラウザで実装され、WOFFは多くのモダンブラウザで利用できます。すでにWebFontsを利用しているかたも多いと思います。まずはちょっとしたところから、WebFontsを使ってみるとよいのではないでしょうか。

著者紹介

ひらいさだあき

仕事ではSIerでJavaの開発やトラブルシューティングを行っています。また最近ではブラウザやHTML5に興味を持っています。

Zen-Codingについては、Chrome ExtensionGreasemonkeyのUserScriptを作っているので、よかったら使ってみてください。

twitter : http://twitter.com/sada_h

blog : techlog



Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。