Tech Racho エンジニアの「?」を「!」に。
  • 開発

Google Font APIは誰でも出来る超簡単

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も公開されています。

フォントのライセンス問題がクリアできれば、すぐにでも積極活用していきたいですね。

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。