Webフォントに関して調べ物をしたので
個人的なメモ。少し利用頻度があがって
来たので探しやすいようにまとめておき
ます。まだちょっと使い慣れてないので
もう少し勉強しないとダメですね・・
スマフォ向けのリソースもあります。
というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。
最低限の知識
最低限かどうか分かりませんけどｗ 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。
ライセンス
まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。
Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなんかも同じなんですが）
こうしたリスクがあるため、フォントファウンダリ側に、その旨の使用許諾が必要になる場合もありますし、現に配布済みの使用許諾書にも影響が生じかねませんので無料で配布されてるからと言って簡単にWebフォントに利用する訳にも行かない、という事のようです(多分)。仮に再配布OKのフォントだとしても、=Webフォントに利用しても良いとは限りませんので注意が必要です。
最も確実なのはパブリックドメインのフォントを利用することです。著作権が切れていれば利用は自由、もちろんWebフォントにも使えますね。
利用法
何度かWebフォントに関して記事を書いてきましたが、少し古めの記事ですが安全な@font-faceの書き方という記事がとても分かりやすく勉強になりました。なぜ安全なのか、は元記事をご覧下さい。
記述法は以下。
@font-face {
font-family: 'example';
src: url(example.eot);
src: local('example Regular'), local('example'),
url(example.otf) format('opentype');
}
eotフォーマットはIE用となりますので、ttfやotfしか無い場合等は、これまたファウンダリ側にttfからeotへのコンバートの許可を得る必要がある可能性も出てきます。なかなか難しいですね。
また、以下のような書き方も見かけます。(参照：The New Bulletproof @Font-Face Syntax)
@font-face {
font-family: 'example';
src: url('example.eot?#iefix') format('eot'), // for IE6-8
url('example.woff') format('woff'), // for IE9, Firefox3.6+, Chrome6+
url('example.ttf') format('truetype'), // for Safari, iOS4.2+
url('example.svg#svgFontName') format('svg'); // for others
}
この書き方の場合、IE9以下だと、src:を複数指定した場合、無視するバグがあるそうですが、拡張子の後に?を含めることでそれ以降の文字をクエリ文字として認識する為、最初のeotをフォントファイルとして認識してくれる、という事みたいです。IEがformat()を解釈できないから、では無いのかな？ちょっとよくわかりませんがIEは総じて困るよねという話。
woffというのはMozillaを含む多くのフォントファウンダリが共同で提案したWebフォント専用のフォーマットで、Google Font APIもこちらを採用しています。
Google Font APIのcssを見ると、このようにwoffだけを採用しています。もしかしてこのフォーマット一つでOKなんですかね・・
[note]コメントいただきました！ありがとうございます！IEでcssを開くとちゃんとeotが読み込まれています。ブラウザで振り分けてたんですねー。素晴らしい。[/note]
@media screen {
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: normal;
src: local('Anton'), url('http://themes.googleusercontent.com/static/fonts/anton/v2/tilmJBBU81h1G7ZsdY3Hmw.woff') format('woff');
}
}
woffだけでOKみたいな記事はちょっと見かけませんでしたが・・この辺勉強不足です。
多少もやもやしますが一応現状で、より確実な書き方は2番目の方法かなぁという結論に達しました。
使用例1
Patua Oneを使用しました→Google Web Fonts Patua One
I am Patua One
使用例2
Antonを使用しました。→Google Web Fonts Anton
I am Anton
メリットとデメリット
さて、Webフォントのメリットやデメリットはどうなんだ、という話ですが、なんとなく和文フォントをWebフォントで利用する、という事に関しては賛否で分かれる印象です。それは日本語圏である事も大きく関わっているかもしれません。
日本語フォントはその文字量の関係で基本的にサイズが大きく、例えWebフォントに利用できたとしてもファイルのロードに時間がかかります。
このロード時間を抑えるために、現状はサブセット化することで短縮しているようです。サブセット化・・というのは使う文字だけ残して後は削除する等してファイル数を減らす施工です。こうすることでロード時間の問題は多少解決できます。例えばフォントプラスというサービスは動的にサブセット化しているようです。
ページ内に必要な文字だけを抽出してデータを軽く。
フォントプラスのシステムはウェブサイトのページ内の文章を自動で解析。そのページ内に使われている文字だけを抽出し、軽量化したフォントデータを自動で作成します。不必要なデータを読み込まないことにより、ウェブサイトのダウンロードの時間を短縮できます。
(via:フォントプラス)
管理的な問題として汎用性に欠ける手動サブセット化ではなく、動的なサブセット化(jsが一般的みたいです)が必要になってくると思いますが、例えばHTML5のcanvas等に使うときはフォントファイルが事前にロードされている必要があるのに対し、jsによる動的なサブセット化では事前にロード出来ない事もあるようです。(参考：@IT)また、サブセット化するという事は当然加工に当たりますのでフォントファウンダリからの許可も必要となってきます。加工OKで2次配布もOK、誰にでもフォントファイルをダウンロードされてもOKな日本語フォント・・と考えるとやはりハードルは高そうですね。
その点、パブリックドメインの欧文フォントは数多く存在し、ファイルサイズも軽量、Webフォントとして許可されているフォントも多く存在します。普通に読み込めますのでcanvasの問題などもありません。日本語フォントでパブリックドメインのものは現状では無いと思いますが、あったとすればサブセット化も自由ですね。
メリットだけとは言えないものの、コンテンツを変更したいときにPhotoshopを立ち上げ、スライスし、画像をアップロードなどの手間を省けるという管理のしやすさ、検索エンジンフレンドリーな点、css3やjsなどで動的なエフェクトを表現出来る、コストや工数削減等、利用するメリットがあることも確かです。なので、今のうちから多少覚えておいても損はしないかなというのが個人的な見解です。まだ研究段階ですね。
さて、余談が長くなりましたが、以下がWebフォントの利用の際に役立ちそうなリソースサイトです。説明はあまり要らないサイトばかりなので適当に済ませています。
欧文フォント
Google Font API
最も利用されている印象です。GoogleでホスティングされているWebフォントで、自由に利用する事が出来ます。種類も400近くありますし、コードも出してくれるので楽で良いですね。
Open Font Library
パブリックドメインのフォントのみを収集しているサイトです。こちらのフォントも勿論Webフォントとして自由に利用する事が出来ます。コンバートもOK。
すみません、様々なライセンスのフォントがありました。それぞれご覧下さい。失礼致しました。
Font Squirrel
Webフォントに利用できるフォントを配布しているサイト。一番見に行ってるかもしれません。
和文フォント
WebFonts として利用できるフリーの和文フォント
ピクセルグリッドの方の有益なまとめ記事です。よく紹介されているフォントを利用しても良いか、コンバートはOKか、サブセット化はOKか、なども書かれています。
M+ WEB FONTS
無料の日本語フォントとしても知られるM+がttfのみsourceforge.jpにてホスティングされており、Webフォントとして利用する事が出来ます。
フォントプラス
先ほどご紹介したWebフォントの有料サービス。動的にサブセット化してくれるのでロードに時間がかかりにくいみたいです。
モリサワ クラウドフォント
最も一般的に利用されている和文フォントブランドのモリサワが提供してくれる・・・はずなんですが、まだみたいですね。一応忘れないようにメモ。
デコもじ
有名な日本語Webフォントサービス。勿論有料のサービスですが、無料で自由に試せるので無料プランから使ってみるといいかもですね。ただ、個人的な意見ですが僕はクライアントワークには利用しないと思います。
もじでぱ
デコもじ同様、有料の和文フォントサービスです。こちらも有料と無料プランがあります。こちらもクライアントワークには利用しないかな。
ツール
WhatFont bookmark
僕も頻繁に使っていますが、Webサイト内で使用されているWebフォントの名前をサクッと調べられるブックマークレットです。これはオススメしています。
ttf2eot
ttfをIEに必要なeotフォーマットにコンバートしてくれるツールです。コンバート前にフォントのライセンスに注意してください。
FF Subsetter
英字フォントのみですが、サブセット化してくれるツールだそうです。フォントブログさんで知りました。使い方も書いてくれています。
Web Font Specimen
Webフォントの様々なシーンでの見栄えを確認出来る、というもの。だそうです。(未検証)A List Apartで知りました。
ROCKWELL
PCにインストールされているフォントでWeb上での表示確認が出来ます。
@FONT-FACE GENERATOR
先ほどのFont Squirrelが提供するコンバーターです。WOFFにも対応。2年前に記事を書きました。
JavaScript
Webフォントと併用するっぽいライブラリです。
LETTERING.JS
1文字づつspanでラップしてくれるライブラリ。楽しいことが出来そうです。:nth-child()と相性良さそうです。
Kern.js
こちらはツールに入れるべきだったんですが、上記LETTERING.JS用のブックマークレットなのでこちらに。LETTERING.JS用にカーニングして、cssを吐き出すブックマークレットです。
FitText
ディスプレイの解像度に合わせてテキストサイズをフィットさせるライブラリ・・・使う予定はまだ無いですけどよく見かけますね。
Kerning.js
カーニング可能なライブラリ。以前ご紹介しましたのでご参照下さい。
ギャラリー
Web Font Awards
Webフォントを利用しているWebサイトのデザインコンテストです。Galleryからいろいろ見れます。
the WEB FONTS gallery
こちらもデザインギャラリーです。以前ご紹介しました。
ギャラリー2個しかなかったｗ
前述したとおり、Webフォントに関してはメリットだけでなく、まだまだ問題を抱えている技術です。サイズの量、ライセンスだけでなく、見栄えもよく論点に上がりますので、Webフォント超オススメ！とは言いませんが、覚えて損は無い知識だなぁとも思いますし、Googleのおかげでかなり手軽に使えますので気が向いたら一度使ってみてはいかがでしょうか。
以上、Webフォントに関するTipsやツールのまとめでした。