Google ウェブフォントの使い方を実際のデモを用いて紹介します

Google ウェブフォント(日本語)

今回はウェブサイト制作でフォント指定をする上で非常に便利で使い勝手が良い「Google ウェブフォント」の使い方や実際に使用したデモを紹介します。

ウェブフォントはホームページのちょっとしたアクセントに使うのにとても重宝します。

その中でも、Google ウェブフォントは、Google が無料で提供してくれていて、安定感やフォント数共に申し分のない使い勝手バツグンのサービスフォント。

Google ウェブフォントは英語と日本フォントがある

Google ウェブフォントには、英語と日本語フォントがあります。英語フォントはめちゃくちゃ沢山あってどれを使おうか迷うほど。日本語フォントは少ないながらも使いやすいラインナップです。

英語ウェブフォント

日本語ウェブフォント

Google ウェブフォントコードの取得方法

英語ウェブフォントの利用コード取得方法

  1. 英語の Google ウェブフォントの取得方法は、まず Google ウェブフォント(英語)にアクセスします。

  2. 例えば Spirax というウェブフォントを使いたいとします。Spirax の右上にある「+」をクリックします。

  3. 画面下にこのような感じで帯が表示されますので、帯をクリックします。

  4. 帯をクリックすると、指定したウェブフォントを効かせるためのコードが掲載されたウィンドウがポップアップします。
  5. このコードを CSS ファイル及び HTML ファイルへ貼り付ければ、ウェブフォントが利用できるようになります。
  6. コードの貼り付け方は下の項で説明します。

日本語ウェブフォントの利用コード取得方法

  1. まずは、Google ウェブフォント(日本語)ページへアクセスします。

  2. 使いたい日本語ウェブフォントをクリックすると該当フォントまでスクロールします。ここでは「Noto Sans Japanese」を選択します。

  3. スクロールした先の右サイドに、CSS 及び HTML へ貼付用のコードがあります。

取得した Google ウェブフォント利用コードの使い方

Google ウェブフォントページで取得した利用コードの貼り付け方は 2パターンあります。

パターン1:CSS ファイルだけで完結するパターン


  1. ウェブフォント利用コード取得ウィンドウで「@IMPORT」タブを選択したときに表示されるコード「@import…」部分をコピーします。@imprt … はウェブフォント読み込み用のコードです。

  2. コピーした @import … は、このように CSS ファイルの一番上に貼り付けます。@import… は必ずセレクタよりも上にまとめて置いてください。中途半端な場所に置かないようにしてください。ここでは body よりも上にちゃんとありますよね。
  3. これで指定のウェブフォントを読み込む準備ができました。

  4. 続いて、ウェブフォント利用コード取得ウィンドウで「@import …」の下にある「font-family …」のコードをコピーして、ウェブフォントを利用したいセレクタへ貼り付けます。

  5. うまくいったようです。この手順でウェブフォントを表示させるのが CSS ファイルだけでウェブフォント設定を完結するパターン1です。

パターン2:読み込みコードを HTML へ貼り付けるパターン

 


  1. ウェブフォント利用コード取得ウィンドウの「STANDARD」タブを選択するとその下に「<link href ….」が表示されているので、それをコピーします。

  2. HTML ファイルの <head>~</head> の間にコピーした「<link href …」を画像のように貼り付けます。これでウェブフォント読み込み準備が完了です。

  3. あとは、パターン1と同じく、「font-family …」をコピーして CSS ファイルのウェブフォントを利用したいセレクタへ貼り付ければ反映されます。
  4. 読み込みコードだけ HTML ファイルに記述するのがパターン2です。

どちらの方法でも Google ウェブフォントは同じ様に利用できるので、お好みの方法を選択してください。

個人的にはパターン1の方が管理しやすいのでおすすめです。

日本語ウェブフォントの注意点

日本語の Google ウェブフォンには「@import ….」のコードがなく、「<link href …」だけしか取得できません。

しかし、https://~.css の部分をコピーして、

として CSS ファイルに記述すればパターン1の方法でも利用できます。

Google ウェブフォントを実際に利用してみたデモページ

一応、実際に Google ウェブフォントを利用したデモページを用意しました。

英語フォントはパターン1の方法で、日本語フォントはパターン2の方法で読み込んでいます。デモページのソースコードを参考にしてください。

デモページ HTML

デモページ CSS


というわけで、Google ウェブフォントの使いかたメモでした!!