2010年5月24日月曜日

Google Font APIをブログに簡単に導入する方法


先日発表されたGoogle Font APIを使って、公開されたフォントを簡単に表示する方法を紹介します。

Google Font APIには現在、18種類の英語フォントが無料で公開されています。

これは、Webフォントというもので、言ってしまえば「フォントのクラウド化」を実現してくれる技術です。ウェブの製作者はこれまで、WindowsとMacのローカルに共通して入っているフォントファミリーしか選択できませんでした。Webフォントはこの縛りから解き放とうとするものです。表示するフォントをローカルではなく、サーバ上から持ってくるところに新しさがあります。これにより多彩なウェブ表現が可能になるという訳ですね。

ただ、サーバから読み込む時間の問題や、フォントの著作権など、解決しないといけない問題も多いようです。特に日本語に関しては、漢字の数が半端じゃない(読み込み時間が相当かかる)。というわけで、まだまだ課題も多いWebフォントですが、Google Font APIのリリースで注目を浴びたことで、これからに期待したいところです。Webフォントについては以下のブログに詳しいです。


前置きが長くなりましたが、前提を踏まえた上で、さっそく最も簡単な組み込み方法を紹介しましょう。

(1)使いたいフォントを探す
Font Previewer」を使って、どんな感じになるかチェックします。
このブログのタイトルロゴを作成してみます。
タイプライターっぽいテイストの「IM Fell English」をチョイス。





(2)Google Webfonts Directoryにアクセス
フォントが決まったら実際に設定作業に入ります。
Google Webfonts Directoryにアクセス。

利用できるフォントの一覧が表示されるので、使いたいフォントをクリック



(3)コードを取得
青い色がついた「Get the code」タブをクリック。
すると以下のようなコードが表示されたページに遷移します。

赤枠で囲んだところにコードが表示されます。こんな感じで。

<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet' type='text/css'>

*<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet' type='text/css' />
Bloggerの場合、最後に「/」(主ラッシュ)を付与しないとテンプレートの構築時にエラーが発生しました。

これをブログやサイトのテンプレートの~内に貼りつけます。



(4)フォントを利用する
ブログ内でそのフォントを使いたいときは、テキストを以下のように囲うだけ。

<span style="font-family: IM Fell English; font-size: 24px;">あああああああああああ</span>

フォントファミリーの名称は~内で指定したものじゃないと表示されないです。

<h1>だけ文字を使用したいという場合などは、もちろんスタイルシートに以下のように記述することも可能です。

h1 { font-family: 'IM Fell English', arial, serif; }

これで実際に指定した箇所に反映されました。


対応ブラウザ


  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Microsoft Internet Explorer: version 6+