先日発表された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+
via BloggerStop.net