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担当。
気づけば15年以上、EC-CUBEを触り続けています。
2系・3系・4系すべて対応、難しいカスタマイズもお任せください。

もともとはJavaの業務システム開発からスタートし、
PHP・Perl・フロント・CMSまで幅広く対応するタイプです。

最近はChatGPT CODEXを活用して、開発スピードも進化中。