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を活用し、開発スピードと品質の両立を実現しています。