Google Font APIを試してみる。

今後使用しそうなので、ちょっとエントリー。

Google Font APIってなんぞ。

通常、ホームページはパソコン内にインストールされているフォントを読み込んで表示するようにスタイル指定されており、MSゴシック等を使用することが一般的で、デザインフォントなどを使用したタイトル等を作る場合には画像での作成が一般的でした。

ですが、最近はサーバーに置いてあるフォントをjavascriptで読み込ませたり、今回のgoogle font APIのようにCSS指定のみでデザインフォントをブラウザが読み込んでくれて表示してくれるようになりました。

そうすることで、画像を作る手間を省いたり、アクセシビリティ的にもよかったりするわけです。
今後は、主流になってくるのではないかと思います。
日本語フォントは有料のものだったりするから主流にはならないと思うけど。

今まで、デザインされたメニューのテキスト表示はMSゴシックなどを使用したデザインが一般的でしたが、これを使用することで、デザインの幅が広がりそうです。
フォントがまだまだ少ないようですが、今後に期待です。

ということでテストしてみました。
実際のテストページは下記ボタンから。

結果、IE以外は全部OKの様子。

なんだかよくわかんないけどIEで表示されないフォントがあった。
なぜだろう～。
表示はこんな感じ。
左からOpera,firefox,google chrome,IE8　あ、safari忘れた。（safariも大丈夫でしたｗ）

IE5.5~7

ちなみに、iphoneのsafari、operaは全滅。
↓safari

↓opera

やり方。

まずはhtmlにサンプルコードを書きます。

<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>

次に、Google Font Directoryからフォントを選ぶ。
フォントを選んだら、Get the Codeのリンクを押して、下記リンクソースを上に記載。一番下のソースをスタイルシートに記載。

すると、サンプルページの用な感じでフォントを読み込ませることができます！

Tags: google, web