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

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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ