Google Font APIを試してみた。

5月19日に、Googleが Google Font APIを公開しました。

すでに、試している人も多く、ちょっと出遅れた感はありますが、Google Font APIを試してみました。

Google Font APIについて書かれているブログ

使い方は至って簡単です。

仮に以下のようなWebページを作成したとします。

ちなみにソースは下記です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Google API テスト</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>

<h1>Google API テスト</h1>

<h2>Google Font API</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>

そして、Google Font Directoryに公開されている18のフォントから使いたいフォントを選びます。

ちなみに、下記図に示すように、Droid Sans Monoを選びます。

そして、Droid Sans Monoをクリックすると下記図のようなページに遷移します。

googleapi1005213.jpg

そして、「Get The Code」のタブをクリックします。

そして、下記図に示すように、 Embed the font into your pageと書かれている箇所に、外部スタイルシートのソースコードが載っています。

これを、先程のWebページに記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Google API テスト</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>

<h1>Google API テスト</h1>

<h2>Google Font API</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>

そして、最後にCSSを設定するだけで完成です。

h1 {
    font-family: 'Droid Sans Mono', arial, serif;
}

ちなみに、下記図では、「Lobster」と「Reenie Beanie」も追加してます。

googleapi1005216.jpg

感想

使ってみての感想は、CSS3の@font-faceもありますが、Google Font APIは、まだまだフォント数が少ないので、限られた中での利用になりますが、@font-faceより、レスポンスが早く感じるので、個人的にはGoogle Font APIのほうが良いと感じました。