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

Advertisement

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 ⇒ ×

もう少しテストしてみます。。。

【参照】

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です