Web業界ではHTML5の採用実績も増えてきました。
動画機能がクローズアップされがちですが、Web開発者として見逃せないのがWebFont機能。
文字で良いのに、フォントが気に入らないというデザイナー様からの意見で、全部画像で作ることが多いはずです。
Google Font APIは、ブラウザごとの違いも吸収してくれる上、使い方もものすごく簡単です。
以下のように、GoogleのCSSを読み込んでfont-familyを指定するだけ。
サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular">
<style>
body {
font-family: 'Reenie Beanie', serif;
font-size: 28px;
font-style: italic;
text-shadow: 4px 4px 4px #bbb;
}
</style>
</head>
<body>
<p>Hello world! I am peter. Nice to meet you.</p>
</body>
</html>
Google Font プレビューページで、色々編集しながらフォントを決めることが出来ます（注: 従来のプレビュー機能はなくなりました: fonts.google.comをご覧ください）。
Google Font APIの仕組み
読み込んでいるCSSを開くと、以下のようになっています。
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: normal;
src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX4jjx0o0jr6fNXxPgYh_a8Q&chromeframe') format('truetype');
}
このうち、最後の行がWeb Fontの読み込み。これにより、Firefox/Opera/Chrome/Safariなどではtruetypeフォントを読み込めます。
最後から2番目の行は、User-Agent制御により、IEで開いたときのみCSSに出力されるようです。
このURLを開くと、.eot形式のファイルがダウンロードできます。IEはなんとIE4の時代からWeb Fontをサポートしていたようですが、そんな歴史的理由により.ttfではなく.eotファイルを読ませてあげないと動かないため、Google側で吸収してくれています。
これは便利！
こんな簡単にWeb側からフォントが指定できるのは、かなり便利ですね。
このAPIも、やっていることは要するにUser-Agentを見てttfとeotを振り分けているに過ぎないので、自前でやるのも十分可能です。
ただ、日本語フォントは重いので、サーバ負荷やローディング時間が気になるところです。
Google Codeを見ると、読み込み中の処理を（デフォルトフォントで表示するなど）制御できるJavaScriptも公開されています。
フォントのライセンス問題がクリアできれば、すぐにでも積極活用していきたいですね。