Google I/Oで発表されて話題の「Google Font API」
早速、ちゃちゃっと試してみた。使い方はすごくシンプルで簡単。
次の2つのステップでできてしまう。
- GoogleのサーバにあるCSSファイルを読み込む
- 読み込んだフォントをCSSで指定する
以下のようなHTMLを入れるだけ！たったそれだけ！
<link href=”http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light” rel=”stylesheet” type=”text/css”>
<style>
.font01 {
font-family: ‘Josefin Sans Std Light’, sans-serif;
font-size: 2.4em;
line-height: 1.2em;
}
</style>
以下、その方法で読み込んだ「Josefin Sans Std Light」というフォントを使って表示した文章です：
This is really great. I really look forward to more fonts being available in the near future.
Googe Font APIよりもフォントの読み込みなど、より細かいコントロールを可能にする「WebFont Loader」というJavaScriptのライブラリがあり、これを使うとGoogle Font Directory以外にもTypeKitのフォントも読み込めるとのことです。
TypeKitは月間100万PVのトラフィックで年間99.99ドルとのこと。ページを多彩なフォントでユーザにとってより魅力的なものにできるのであれば、それほど高い値段だとは思えません。
日本語のフォントも、はやく使えるようになるといいな〜。
注記：
Win7 IE8とIETesterのIE6、IE7でチェックしてみたんですが、なぜかうまく表示されませんでした。
Google Font APIのFAQページでは、以下のブラウザをサポートしていると明記してあるので問題ないと思うんですが。
The Google Font API is compatible with the following browsers:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Opera: version 10.5+
- Microsoft Internet Explorer: version 6+
ちなみに、チェックしたのは
- Mac Firefox 3.6.3 ⇒ ○
- Mac Chrome 6.0.408.1 ⇒ ○
- Mac Safari 4.0.5 ⇒ ○
- Mac Opera 10.53 ⇒ ○
- Win7 Firefox 3.6.3 ⇒ ○
- Win7 Chrome 6.0.408.1 ⇒ ○
- Win7 IE8 ⇒ ×
- Win7 IETester IE6/IE7 ⇒ ×
もう少しテストしてみます。。。
【参照】
2010年5月22日に公開され、2010年5月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。