先日公開させていただきましたアプリ（初めてのiPhoneアプリ jQClock を公開しました | itFun.jp）のサポートページにせっかくなので前々から使ってみたかったGoogle Font APIを使ってみました。

サポートページ : jQClock | itFun.jp

Googleが用意したFontを非常に簡単に組み込むことによってWebデザイン・表現が大幅に改善できると言う物です。
現状はPCなどそれぞれのデバイスにインストールされているフォントがCSSのFont-familyで指定したものとマッチすれば表示されますが、それをGoogleにホスティングされたフォントを読み込んで表示することでPC側にフォントがインストールされていなくても大丈夫になります。

ちなみに現在Google Font APIで表示できるフォントの一覧
Google Font Directory
もちろんすべてのフォントがオープンライセンスなので利用上の制約はありません。

実際の使い方も簡単です。
Getting Started - Google Font API - Google Code

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

下線部の部分を読み込みたいフォント名（上のFont Directoryから選択）に変えてあげて、後は通常通りFont-familyで読み込んだフォント名を指定すればそのフォントを利用出来ます。
ね、簡単でしょ。

今回は標準で入ってそうなフォントを使いましたが、もっと印象的なフォントを選択すると面白いかも。あと、ワンポイントにはもってこいです。

ただ、これでどんなブラウザでも同じように表現することが出来るかというと残念ながら…

一番上の画像はChromeでのスクリーンショット
これはSafariでのスクリーンショット

この辺はブラウザのフォントレンダリングの実装の違いでどうにもなから感じ。
ここは変わって欲しくないと思う部分には画像化したものを配置した方がいいかも。

また、フォントのレンダリング以外にも注意することがあります。
少なくともユーザはフォントをGoogleからダウンロードしているので、いくらGoogleが圧縮配信してくれていると言っても数十KBの容量はかかります。
モバイルサイトや一見さん向けのサイトで使う分には注意した方が良いかと思います。

ただ、Webアプリや奥に奥に進んでいくようなサイトの場合はワンポイントごとに画像を使うよりも、一度読み込めばキャッシュから即座に描画できるFont APIの方がユーザーにとっても転送コストが少なくなるのではないでしょうか。

使い勝手がよくて画像をいちいち用意しなくても”最近のブラウザ”ならそれなりに描画してくれるのは便利です;p