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をクリックすると下記図のようなページに遷移します。
そして、「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」も追加してます。
感想
使ってみての感想は、CSS3の@font-faceもありますが、Google Font APIは、まだまだフォント数が少ないので、限られた中での利用になりますが、@font-faceより、レスポンスが早く感じるので、個人的にはGoogle Font APIのほうが良いと感じました。
コメントする