10-07-08

Google Font APIを使ってみる

demo

LabPad

LabPad

memo

作業内容

Googleに登録されたフォントを利用することで、インストールされていないフォントでも皆同じように表示させることができるGoogle Font APIを使ってみます。

--- head内に記述し指定のフォントを読み込む ---
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=ここにフォント名">

--- htmlのbody内に記述 ---
<p class="Vollkorn">LabPad</p>
<p class="Reenie">LabPad</p>

--- フォントをCSSで指定 ---
.Vollkorn{
 font-family:Vollkorn;
 font-size:3em;
}
.Reenie{
 font-family:Reenie Beanie;
 font-size:3em;
}

詳細はGoogle Font APIページ内Getting Startedで確認できますが、CSSを読み込んで読み込んで適用、と言う感じでとても簡単です。IE非対応ですが、text-shadowなんかも設定できるようです。
また、日本語表示させるとiPhoneやiPadでは表示されないそうなのでそこは注意が必要です。

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.