ウェブ・フォントの未来が見えてきた： Google Font APIを試す

Google I/Oで発表されて話題の「Google Font API」
早速、ちゃちゃっと試してみた。使い方はすごくシンプルで簡単。

次の2つのステップでできてしまう。

  1. GoogleのサーバにあるCSSファイルを読み込む
  2. 読み込んだフォントを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/05/22 23:30 by @Rriver | RSS | Fb

関連する投稿

関連するカテゴリ・タグ

カテゴリ： 制作・運営・ノウハウ
タグ： 、

Ads by Google