- Coding Methodology
- 第60回 Google Fontsを導入してみよう
第60回 Google Fontsを導入してみよう
通常ブラウザに表示される文字はPCにインストールされているフォントに限られている。そのため端末のフォント如何では、デザイナーが意図しない表示となる問題がある。もちろん現在多くのサイトがそうであるように、フォントを画像にして表示する代替方法はあるが、望むようなSEO効果が得られなかったり、更新性、ファイルサイズなど多くの弊害がある。
実装例
- Google Fontsに代表されるwebフォントとは？
- これらを一挙に解決するのがフォントをWWW上からダウンロードして表示する、webフォントと呼ばれる技術だ。webフォントはデザイン性が高く一見すると画像のようだが、あくまでも文字であるため、理想的なSEO効果が得られたり、通常のテキストと同様にCSSで色やサイズを変更できたりと様々なメリットがある。
そんな有望な技術であるwebフォントであるが、表示に時間がかかるという致命的な問題があり、ここまであまり普及が進まなかった。しかし現在、インフラの整備や、表示する文字だけをダウンロードするシステムの登場によって実用に耐えうるレベルとなり、脚光を浴びている。
今月はそんなwebフォントを提供するサービスの中でも、もっとも代表的な1つであるGoogle Fontsについてご紹介しよう。
01 Google Fonts サイト
02 スタイルシートを呼び出すコードが出力される
03 CSSコードが出力される
- Google Fonts実装の3ステップ
-
まずwebフォントにしたい文字を通常通りマークアップしよう。
次にGoogle Fonts(http://www.google.com/fonts)サイトへと移動する。(01)ここから3ステップで実装できる。- ■ステップ1:フォントの選択
多数あるフォントの中から、利用したいフォントを選択しよう。 - ■ステップ2:詳細設定をしてスタイルシートを読み込む
利用したいフォントを決定後、各フォントのサンプル右側にある「→」というボタンを押し、詳細設定画面へと移動する。ここでは太字にするなど、詳細をカスタマイズできるので、必要に応じた設定をして欲しい。設定後、選択したwebフォントを利用するのに必要なスタイルシートを呼び出すコードが発行される。(02)コピーして<head>内に貼り付けよう。(04) - ■ステップ3:CSSにfont-familyを追加
最後にfont-familyのコードが出力されるので(03)、Webフォントにする箇所に追記しよう。(05)...以上でGoogle Fontsの実装完了だ。
- ■ステップ1:フォントの選択
04 HTMLソース
05 CSSソース
