2010.05.20 – 10:24
ついにGoogleも、Google Font APIを用いたWebフォントサービスを開始しました。もちろん無料です。利用できるフォントの数は現時点で18と、それほど多くありませんが今後増えていきそうな予感です。また技術的には、Webフォントサービスの大御所Typekitとコラボをしています。
利用できる書体には、Androidケータイに使われている“Droid Sans”や“Droid Serif”があることが注目点でしょうか。
また対応ブラウザに関しては、IE6以上、Firefox 3.5以上、Safari 3.1以上、Chrome 4.249.4以上と、他のWebフォントサービス同等となっていますが、現時点でSVG Fontには非対応なのでiPhoneやiPadでは任意の書体で表示することができません。
まずは基本的かつ簡単な利用方法を紹介したいと思います。
今回はDroid Sansを例に設置してみます。個別の書体ページへ行くとSpecimenには組版、Variantsにはウェイトバリエーション、Character Setには文字セット、Descriptionには著作権情報、Get the codeには挿入するコードについて書かれています。
Get the codeページにある、専用のCSSファイルを内に読み込みます。基本的にはfamily=以下にフォント名を指定する仕組みとなっています。
あとは通常のfont-familyで指定してあげればOKです。Typekitのような管理画面は用意されていないので、自身で設定する必要がありますが、知識があれば難しくありません。
↓こんな感じでできましたか？
Have you finished? ABCEFGabcdefg12345
Have you finished? ABCEFGabcdefg12345
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
