Google Font API でフォントを変更する

Google から Google Font API のベータ版がリリースされました。(2010/05/20)

 

Google Font API は指定したフォントがPCにインストールされていなくても、ブラウザ上で美しいフォントを表示するための仕組みを提供してくれます。

 

今日はこれを試してみます。

 

 

まず、どんなフォントが使えるのか見てみましょう。

 

Font Directory に使用できるフォントがリストアップされています。

 

これらはすべてフリーのフォントです。

 

残念ながら、2010/05/20現在日本語フォントは対応していませんが、いずれ対応してくれるものと信じて進めることにします。

 

 

今回は非常に特徴的なフォント"Reenie Beanie"を使ってみます。

 

"Reenie Beanie"の行をクリックします。

 

 

 

このフォントの解説ページが表示されますので、"Get the Code"タブをクリックします。

 

"Embed the font into your page"の枠の中にこのフォントを使うためのコードが表示されます。

 

 

コードは次のように書かれています。

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

"Reenie+Beanie"の部分がフォント名です。

 

"Reenie Beanie"はフォント名にスペースが入っています。

 

Google Font APIでは、スペースは"+"に置き換えて指定する決まりになっています。

 

フォントの指定はこの部分で細かく行うことができます。 

 

例えば複数のフォント名を使えるようにするには、フォント名を"|"で繋いで指定します。

 

詳しい使い方は Google Font API の Getting Started を参照してください。

 

 

では、Jimdoにログインして、「設定」→「ヘッダー部分を編集」を選択し、先ほどのコードをコピー&ペーストして保存します。

 

準備と言ってもこれだけです。

 

 

次に、このフォントを適用する箇所のCSSを編集します。

 

"Get the Code"の例では次のように書いてありますので、変更したい箇所の"font-family"の先頭に"Reenie Beanie"を追加するだけで良さそうです。

 

h1 { font-family: 'Reenie Beanie', arial, serif; }

 

今回は独自レイアウトのHeadlineを変更します。

 

「レイアウト」→「独自レイアウト」→「CSS」を開き、ヘッダ部のfont-familyに、"Reenie Beanie"を追加します。

 

 

CSS修正前

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

CSS修正後

#header h1,
#header a
{
    padding:0;
    font-family:"Reenie Beanie","Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

 

以上で終了です。

 

最終的な結果は右の画ようになります。

 

 

 

 

 

 

Font Preview
Font Preview



 

フォントには影を付けたり、取消し線を引いたりといった装飾を施すこともできます。

 

Font Previewer を使えば、GUIで見た目を確認しながらCSSのコードを生成することができるので、非常に簡単にカスタマイズすることができます。

 

 

ベータ版ということですが、既に十分洗練された使い勝手を備えています。

 

表示がPCに依存しないので、WinとMacなどOSの違いを気にしなくて良いという利点もあります。

 

日本語フォントの追加が待ち遠しいですね。

 

 

 

 

 

ではまた~