ウェブ・フォントの未来が見えてきた： Google Font APIを試す
2010/05/22 @11:30 | 制作・運営・ノウハウ
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 ⇒ ×
もう少しテストしてみます。。。
【参照】