インストールせずに、好きな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を利用することで、さまざまなフォントによる表示や表現ができます。

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

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

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）となりました。

WOFF File Format 1.0 - W3C

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

HOME | フォントプラス

モリサワ　クラウドフォントサービス「TypeSquare（仮称）」を発表 | 企業情報 | 株式会社モリサワ

　このように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に関する様々な情報が記載されています。