WEBフォント。Google Font API を使ってみた | サンクユーWEB制作ブログ

遅ればせながら、Google Font API を使ってみました。
Browse Fonts

昨年の5月にリリースされて以降、色々なサイトで利用されているのを目にするようになりました。(主に海外サイト)

通常、Webページ上で表示されるフォントは、クライアント環境によって大きく異なりますが、これをどの環境(より多くの環境)でも同じフォントを表示できるようにしよう! というのがこのAPIです。

これまで、画像で表現していたおしゃれなフォントを、文字データとして表示することができるので、SEO的にもよさそうですね。

さて、使い方ですが、シンプルな2ステップ。

1. HTMLヘッダにて、利用するフォントのCSSを指定

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Font+Name">

2.CSSにフォント指定

CSS selector {
  font-family: 'Font Name', serif;
}

サンプルページを用意しました。

他にも素敵なフォントがたくさんあります。詳しくはGoogle Font ディレクトリ（https://www.google.com/webfonts）へ。

Google Fontを利用するもう一つの方法として、Web Font Reader（https://code.google.com/intl/ja/apis/webfonts/docs/webfont_loader.html#Example）があります。

The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Font API provides.(Web Font Reader サイトより引用)

こちらも面白そうですね! 試してみたいと思います。

Nakamura: サンクユーのEC-CUBE先生。
EC-CUBEのカスタマイズをし出して早15年。
難易度の高いカスタマイズもお任せ。
２系、3系、4系すべて対応可能。

実はjavaでの業務システム開発がエンジニア人生のスタート。
PHP、Perl、フロントエンド開発、Movable Type、Wordpressも得意という万能エンジニア。