コーディングメソドロジー

第60回 Google Fontsを導入してみよう

通常ブラウザに表示される文字はPCにインストールされているフォントに限られている。そのため端末のフォント如何では、デザイナーが意図しない表示となる問題がある。もちろん現在多くのサイトがそうであるように、フォントを画像にして表示する代替方法はあるが、望むようなSEO効果が得られなかったり、更新性、ファイルサイズなど多くの弊害がある。

実装例

実装例

Google Fontsに代表されるwebフォントとは?
これらを一挙に解決するのがフォントをWWW上からダウンロードして表示する、webフォントと呼ばれる技術だ。webフォントはデザイン性が高く一見すると画像のようだが、あくまでも文字であるため、理想的なSEO効果が得られたり、通常のテキストと同様にCSSで色やサイズを変更できたりと様々なメリットがある。
そんな有望な技術であるwebフォントであるが、表示に時間がかかるという致命的な問題があり、ここまであまり普及が進まなかった。しかし現在、インフラの整備や、表示する文字だけをダウンロードするシステムの登場によって実用に耐えうるレベルとなり、脚光を浴びている。
今月はそんなwebフォントを提供するサービスの中でも、もっとも代表的な1つであるGoogle Fontsについてご紹介しよう。

01 Google Fonts サイト

01 Google Fonts サイト

02 スタイルシートを呼び出すコードが出力される

02 スタイルシートを呼び出すコードが出力される

03 CSSコードが出力される

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の実装完了だ。

04 HTMLソース

04 HTMLソース

05 CSSソース

05 CSSソース

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム