GoogleがWebフォントサービスを開始

2010.5.20 Thursday - 10:24

GoogleがWebフォントサービスを開始

キーワード

ついにGoogleも、Google Font APIを用いたWebフォントサービスを開始しました。もちろん無料です。利用できるフォントの数は日に日に追加されており、どんどん増えています。また技術的には、Webフォントサービスの大御所Typekitとコラボをしています。

利用できる書体は、基本フリーフォントが多いのですが、Androidケータイに使われている“Droid Sans”や“Droid Serif”があることが注目点でしょうか。

また対応ブラウザに関しては、IE6以上、Firefox 3.5以上、Safari 3.1以上、Chrome 4.249.4以上と、他のWebフォントサービス同等となっていますが、現時点でSVG Fontには非対応なのでiPhoneやiPadでは任意の書体で表示することができません。

まずは基本的かつ簡単な利用方法を紹介したいと思います。

1. まずは使いたい書体を選びましょう

1. まずは使いたい書体を選びましょう
今回はDroid Sansを例に設置してみます。個別の書体ページへ行くとSpecimenには組版、Variantsにはウェイトバリエーション、Character Setには文字セット、Descriptionには著作権情報、Get the codeには挿入するコードについて書かれています。

2. 専用のスタイルシートファイル (CSS) を読み込みます

2. 専用のスタイルシートファイル (CSS) を読み込みます
Get the codeページにある、専用のCSSファイルを内に読み込みます。基本的にはfamily=以下にフォント名を指定する仕組みとなっています。

3. フォントを使うためのCSSセレクターの設定をします

3. フォントを使うためのCSSセレクターの設定をします
あとは通常のfont-familyで指定してあげればOKです。Typekitのような管理画面は用意されていないので、自身で設定する必要がありますが、知識があれば難しくありません。

p.droidsans { font-family: ‘Droid Sans‘ }

↓こんな感じでできましたか？

Have you finished? ABCEFGabcdefg12345

APIで提供されているため、他の方法でも応用を利かせることができます。開発者の方はぜひ試してみてください。

Google Font Dictionary
http://code.google.com/webfonts

Google Font APIの使い方
http://code.google.com/apis/webfonts/docs/getting_started.html

Google Font APIで使える書体のプレビュー
http://code.google.com/webfonts/preview

フォントブログ
Fonts & Typography Blog – since 1998.