2010/05/24

Google Font DirectoryとAPI HowTo

Google Font APIが楽しそうなのでやってみました。
http://code.google.com/intl/ja/apis/webfonts/

やり方はとても簡単です。

方法としては以下の2つのやり方が簡単です。
1.ページ内でlinkタグを使う。(HTMLファイル内)
まず、APIを使えるようにインポートしてやります。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie" />

次に、同一ファイル内で適用する要素を指定してやります。

<script>
body {
background-color:#272727;
font-family: "Reenie Beanie", serif;font-size:20px;
text-shadow: 4px 4px 4px #aaaaaa;
}
</script>

font APIを使用したいページのheadタグの中で使ってあります。
HTMLソースはFont APIのページで自動生成してくれるので、何もすることはないです。

2.外部スタイルシートで@importを使う。(スタイルシート内)
この方法を使うと、ウェブサイト内の全ページでフォントを統一したい場合などに便利です。
例えば、全ページで使用するCSS(style.cssのような)の先頭に以下のようなコードを入れてあげます。
まず、APIを使えるようにインポートしてやります。
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);

次に、同一ファイル内で適用する要素を指定してやります。
body {
background-color:#272727;
font-family: "Reenie Beanie", serif;
font-size:20px;
text-shadow: 4px 4px 4px #aaaaaa;
}



1の方法だとページごとにフォント指定ができますし、2の方法だとウェブサイト全体でフォントが統一できますね。