google

Google Font API で手軽に始めるフォント遊び

Yasuhisa Hasegawa

• 1 min read
Say Hello to Google Font API
Google Font API icon

昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。

今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。

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

CSS だけで Web Font を利用することが出来ますが、JavaScript を利用して様々なコントールが出来るようになっています。WebFont Loader というライブラリを利用すれば、どのタイミングでローディングした Web Font をテキストに適応させるかをコントロールしたり、継承させたい Web Font の順番を指定したり出来ます。どのタイミングで Web Font を適応させるかが特に重要で、ブラウザごとに適応のさせて方が異なります。

例えば Chrome、Safari、IE では、Web Font がローディングされるまでは、適応させたいテキストエリアが空白になってしまいます。Firefox の場合は Web Font がローディングされるまでディフォルトのフォントでテキストを表示させます。こうした Web Font の扱われ方の違いを統一したい場合に WebFont Loader は非常に便利です。

実はこのプロジェクト、以前紹介した TypeKit と Google が共同で行っており、WebFont Loader はオープンソースとして公開されています。Google AJAX Libraries APIと組み合わせれば、より早く JavaScript ライブラリを読み込むことが可能になります。

現在、Google Font API で公開されているフォントはすべてオープンソースです。今後フォントの数は増えてくると思いますが、ほぼすべてがオープンソースの可能性が高いでしょう。点在しているオープンソースのフォントが Google によりひとつにまとめられてるのは利用者視点から言えば大変便利ですね。Google のサーバーが早いのか回線速度が速いのか判別しにくいですが、100k 前後あるフォントの読み込みは非常にスムーズです。しかしながら、テキストのレンダリングだけで多くの帯域を使うのはもったいない気もします。100k よりさらに小さくしたり、テキストレンダリングの手法をコンパクトに出来ないのかつい考えてしまいます。常用漢字だけにしても膨大なファイルサイズになってしまう日本語でも今後 Web Font を手軽に利用出来るようになるためにも解決していきた課題です。

ただ今回のニュースでひとついえることは、また一歩良い方向へ進んだということでしょう。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。