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では表示されないそうなのでそこは注意が必要です。