Google Font API を使ったフォントの表示

(Google Font API - Google Code より)
The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

しばらく前になるが、Google がフォントの提供を始めた(今のところ、まだ beta 扱い)。フォントファイルを提供するだけではなく、ウェブページからリンクするサービスを用意することで、ページの表示時にブラウザがフォントを動的にダウンロードできるようにしたのだ。

使い方

ウェブページ用に使う方法

公式ドキュメント( "Getting Started - Google Font API" ) に書かれている方法は、HTML 中の LINK 要素を使い、Google Font API の URL に対してフォント名を指定するというものだ。以下の記述を HTML の HEAD 要素の中に記述する。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

スタイルの定義では、他のフォントと同じように扱うことができる。

font-family: "Neuton", Verdana, "HiraMaruProN-W4", serif;

このように指定すれば、英数字の部分については、Google Font API の Neuton または (Google Font API が使えないなどの場合は) Verdana が使われ、日本語部分に対しては「ヒラギノ丸ゴ ProN」が使われる。もし、3 つとも使えないなら、デフォルトの serif フォント(ひげつき) が使われる。

Mac 上の Safari で試すと、こんな風になる。英字部分には Tangerine、日本語部分には「ヒラギノ丸ゴ ProN」が使われていることがわかるだろう。「Making ...」の部分には影がかかっているけど、これは CSS の text-shadow で付けたのであって、Google Font API とは関係ない。

では、外部 CSS を使っている場合はどうすれば良いのか？ その場合は、@import で Google Font API の URL を(フォント名とともに)指定すれば良い。具体的には、CSS ファイルの先頭に以下のように記述する。

(外部 CSS の場合の記述例)
 1: /* Google Font API ( http://code.google.com/apis/webfonts/ ) */
 2: @import url('http://fonts.googleapis.com/css?family=Lobster');
 3: @import url('http://fonts.googleapis.com/css?family=Neuton');
 4: @import url('http://fonts.googleapis.com/css?family=Droid+Sans+Mono:regular');

この例では Lobster、Neuton、および Droid Sans Mono の 3 つのフォントが利用可能になる。

iPhone で表示させたサンプル

Google Font API の 公式FAQ には iPhone、iPad、iPod、それに Android はサポートしていない、と明記されている。しかし、今回試してみた限りでは問題なく表示できた。試したのは iPhone 3GS (iOS 4.0.2) と iPad (iPhone OS 3.2.2) だ。

これ(→)は、iPhone で iMac の Apache 経由でページを開いた状態でスクショにしたものだ。

ブログタイトルの部分が Lobster フォント、記事のタイトル(「iPhone 対応」の iPhone という文字)が Neuton フォントによる表示になっている。

また、以下のスクショ(これも iPhone、ただし横向き)は等幅フォント Droid Sans Mono をソースコードの表示部分に指定したものだ。

この Droid Sans Mono、すっきりしたフォントでコードを表示させるのに適している。Google Code のソース表示でも使えば良いのに。

Mac にインストール

Google Font API のサイトからたどれる Google Font Directory では、この API 経由で使えるフォントをすべて見ることができる。またフォントごとのページをたどればフォントファイルをダウンロードすることもできる。試しに、Droid Sans Mono をダウンロードしてみた。TTF フォーマットでサイズは 119 KB。Mac のフォントとして追加すれば、アプリの表示にも使える。気に入ったので、しばらく Xcode のエディタで使ってみるつもりだ。

フォントによってライセンスが異なるようで、Google Font Directory の個別のページからライセンスが確認できる。たとえば、Droid Sans Mono なら Apache License, version 2.0 が指定されている。

Google がフォントを提供することの意味

利用できるフォントが増えることは表現手段の増加だから、単純にうれしい。自分の書いたものがキレイなフォントで表示されるっていうのは、コンピュータを使っていて感じることのできる基本的な喜びの一つだから。

手元の Mac や PC にフォントを増やすことは比較的簡単にできる。英数字の範囲であれば、フリーで使えるフォントが数多くある。日本語のように文字数の多いフォントは大抵有料になるけど、入手しやすい価格のものだってある。けれど、いくらローカルにフォントを増やしたところで自分のサイトやブログの表示には使えない。なぜなら、ユーザに見えるのはユーザの手元にある Mac や PC (や iPhone や iPad や Android) のフォントなのだから。

Google Font API はウェブのどこからでも利用できるフォントだ。わたしの iMac でも、他の誰かの PC でも、インターネットにつながっていさえすれば使える。OS を問わず、デバイスを問わず、同じフォントで見える(英数字に限るけどね……)。これを使えば、わたしの見ているもの(ウェブページ)が、あなたの見ているもの(ウェブページ)と同じになる(まあ、だいたいは)。

その代わり、ページのダウンロードサイズが増える。フォントがページにくっついて行くことになるから。フォント 1 つが数十 KB のデータだ(ダウンロード時は圧縮されているらしい)。ダウンロードサイズが大きくなれば、ページが表示されるまでの時間が伸びる。

ま、近頃のウェブページはどこも写真ぐらいは貼っているから、いまさら数十 KB を気にしても仕方がないか。

関連リンク

• Introducing the Google Font API & Google Font Directory (Google Code Blog)
• Google Font API (Google Code))
• Google Font Directory (同上)

関連記事

• iPhone 対応してみる