Web フォントを使ってみよう！～ライセンスフリーなWebフォントのまとめ～

2012.06.26

まさかの nakamura さんとの投稿かぶり！キー！！

さて夏は軽井沢辺りのコテージで、花火大会見ながらビールと枝豆を･･･というささいな夢がある若いおっさん Latin です。

今回はWeb フォントを少しピックアップしてみました。CSS3の本格的な実用化で、今後さらに使われるサイトが増えていきそうな気がしますね。

目次　Web フォントを使ってみよう！

Web フォントって何？
Web フォントのメリット
Web フォントのデメリット
Web フォントを使ってみる
利用可能なフォント形式
各ブラウザのWeb フォント対応状況
Web フォントのフォーマット変換
ライセンスの取り扱い

Web フォントって何？

これまで、WEBサイト制作時に指定するフォントは、あくまでもクライアントサイド（訪問者のPC）にインストールされている必要があり、いくらお洒落なフォントを使ったとしてもアクセスしてきたユーザーのPCにそのフォントがインストールされてなければ表示されず、 PC出荷時に標準でインストールされているような標準フォント（Windows だったらMS P ゴシック、Macだったらヒラギノetc）しか事実上、使われてきませんでした。

しかし、CSS3以降では「Webフォント機能」なる新しい機能が登場した事により、フォントデータをこちらのサーバーサイドで持っておく事で、クライアントサイドでも指定したフォントでWebサイトを表示させる事ができるようになりました。
主要ブラウザでは既にこのWebフォント機能に対応しているので、あなたのWebサイトも着飾ってみては？！

Web フォントのメリット

画像で補っていたオシャレフォントをテキストだけで実装できる。
CSSで指定している為、フォントを変えるだけでWebサイトの模様替えも容易。
テキストボリューム（量）が上がりSEO効果にも繋がる。

Web フォントのデメリット

ブラウザ毎で対応できるフォント形式が異なる為、変換したフォントデータを別途でアップしなければならない。
フォントデータの変換作業がめんどくさい。
ライセンス上の問題から、有料フォントは基本的にはほとんど使えない。

Web フォントを使ってみる

例えば、「example」というフォントデータがあったとします。
CSS3の「@font-face」の記述でフォントデータを読み込み、「font-family」プロパティで指定します。

フォントデータの「.ttf」の拡張子はTrue Typeフォントを意味しますので、CSSの方で format('truetype') で指定してあげます。
これだけ！

@font-face {
font-family: 'example';
src: url('../font/example.ttf') format('truetype');
}

h1 {
font-family: 'example';
}

利用可能なフォント形式

形式	拡張子	format()の指定値	概要
TrueType	.ttf	truetype	WindowsやMacで使われる一般的なフォント形式
OpenType	.ttf, .otf	opentype	PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat （WOFF）	.woff	woff	Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType （EOT）	.eot	embedded-opentype	マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font	.svg, .svgz	svg	SVGを利用したフォント形式

各ブラウザのWeb フォント対応状況

各ブラウザのWebフォント対応状況です。
前述した通り、ブラウザ毎に使えるフォントフォーマットが異なる為、任意のブラウザに形式を変換した専用のフォントデータをアップロードしておく必要があります。

ひとまずは、モダンブラウザで使えるTrue TypeもしくはOpen Type、IEで使えるEOT形式のフォントデータを用意しておけば良さそうです。
スマホサイトにも使いたい！という場合は、SVG形式のフォントデータをもう一つ用意しておけば良い感じでしょうか。
WOFF形式は容量も軽いですし、今後普及していくと思われるフォーマットですので、後々のメンテナンス等の手間を考えるとやはりこちらも容易しておいた方が良いかもしれません。

	TrueType （.ttf）	OpenType （.otf）	EOT （.eot）	WOFF （.woff）	SVG Font （.svg）
IE 4～	×	×	○	×	×
IE 9～	×	×	○	○	×
FireFox 3.5～	○	○	×	×	×
FireFox 3.6～	○	○	×	○	×
Safari 3.1～	○	○	×	×	○
Chrome 4～	○	○	×	×	○
Chrome 6～	○	○	×	○	○
Opera 10～	○	○	×	×	○
Opera 11.10～	○	○	×	○	○
iOS4.0～	×	×	×	×	○
iOS4.2～	○	○	×	×	○
Android 2.2～	○	○	×	×	×