Webフォント初心者にオススメ！Google Fontsの使い方3STEP

自社のWebページを制作する時、「せっかくなら機能だけではなく、デザインにもこだわりたい！」と考える方は少なくないはずです。

一言にデザインといっても、イラストや写真などの素材、ページ全体のレイアウトなど、工夫できるポイントは様々です。中でも、ユーザーが必ず目を向ける*文字（フォント）*は、そのWebページが訴求したいイメージやコンセプトを表現するための重要なポイントです。そこで活用したいのが、「Webフォント」です。

Webフォントは、サーバーからデータを読み込んでWebページに表示できるフォントのことで、端末や閲覧環境にかかわらず、統一したフォントデザインで表示できることが魅力です。

今回は、Webフォントの基礎を解説した上で、Google社が提供するWebフォントサービス「Google Fonts」の基本的な使い方を紹介します。
　　

Webフォントとは

Webフォントとは、データをサーバーから読み込み、Webページに表示させることができるフォントのことです。サーバーから直接フォントのデータを読み込むため、どの端末から閲覧しても同じフォントを表示できます。
　　

メリット

どの端末からでも統一して表示できる

通常のフォントは、そのWebページを見ているパソコンやスマートフォンなどの端末に、あらかじめインストールされているフォントしか表示できません。そのため、閲覧ユーザーによっては、そのWebページの印象が変わってしまう可能性があります。

しかしWebフォントであれば、どの端末からでも同じフォントで表示できるため、表示環境に左右されにくいのが特徴です。
　　

更新・運用が簡単に行える

Webフォントが普及する前は、ユーザーの端末によって表示が異なる可能性のあるフォントは、画像データで表示して対応していました。しかし、テキストではないために検索ができずSEO対策に不利だったり、表示させる箇所や端末に応じて画像を作り分けなければならなかったりというデメリットがありました。

一方Webフォントはコードを入力するだけなので、テキストとして表示させながら、Webページの更新や運用ができるようになります。
　　

デザインの差別化ができる

最近は様々な種類のWebフォントが登場しています。自社のイメージやコンセプトに合わせて取り入れることで、他社との差別化ができ、アピールポイントを訴求しやすくなるでしょう。
　　

注意すべき点

データ量によっては表示が遅くなる

Webフォントはサーバーから読み込むため、フォントの種類によってはデータ量がかさみ、表示が遅くなることがあります。特に日本語の漢字などは、字画も多いので注意しましょう。
　　

日本語のフォントの種類が少ない

日本語は、ひらがな・カタカナ・漢字と文字の種類が多いため、全てに対応しているWebフォントは多くありません。

利用するWebフォントで対応していない文字があると、その文字のみ通常フォントで表示されてしまいます。その場合は、見栄えの悪さを防ぐためにも、ロゴなどの英数字はWebフォントを利用し、通常の日本語の文章は通常フォントで行うなど、使い分けてみましょう。

ちなみに、以前ferretでは日本語のWebフォントを提供しているサービスをご紹介しています。良ければ参考にしてみてください。

参考
【保存版】和文のWebフォントサイト30選｜ferret
　　

著作権（ライセンス）に注意する

Webフォントの提供サイトには、「商用利用の可否」「利用できるWebページの種類」「再配布」などに関する規約があります。利用する際は、提供サイトの規約をしっかり確認してから使用しましょう。

Google Fontsとは

Google Fonts

「Google Fonts」は、Google社が提供する完全無料・登録不要のWebフォントサービスです。商用利用もできるため、幅広く活用できます。豊富な種類を揃えていることも魅力です。

気に入ったフォントがあればすぐにコードをコピーできるため、「Webフォントを使ったことはないけど試してみたい」方にオススメのサービスです。

今回は、Google FontsでのWebフォントの「検索方法」と「利用方法」を解説します。
　　

Google Fontsの検索方法

Google Fonts

Google Fontsのトップページ右側の検索メニューで、利用したいイメージに合わせたフォントを検索できます。全て英語のサイトなので、各検索項目を日本語で確認していきましょう。
　　

カテゴリー検索

「Categories（カテゴリー）」では、フォントの字体ごとに検索できます。

以下の項目から、イメージに近いカテゴリーを選びましょう。

・Serif：明朝体
・Sans Serif：ゴシック体
・Display：装飾
・Handwriting：手書き
・Monospace：等倍（文字幅が全て同じ）

　　

並び順検索

「Sorting（並べ替え）」では、検索結果の並び順を指定することができます。まずは人気順に並べてみて、流行を把握するのも面白いかもしれません。

・Trending：流行順
・Popular：人気順
・Date Added：新着順
・Alphabetical：アルファベット順

　　

絞り込み検索

「Sorting（並べ替え）」以下の項目では、フォントの特徴に合わせて絞り込み検索ができます。

・Languages：言語※日本語は非対応
・Number of styles：スタイルの数（太字、斜体など）
　→つまみを右に動かすほど数が多いものを表示（「ALL」から「18個」まで）
・Thickness：文字の太さ
　→つまみを右に動かすほど文字が太いものを表示
・Slant：斜体の角度
　→つまみを右に動かすほど角度が大きいものを表示
・Width：文字幅の大きさ
　→つまみを右に動かすほど幅が狭いものを表示
・CLEAR FILTERS：検索フィルターの解除

Google Fontsの利用方法

検索の仕方が分かり、お気に入りのフォントが見つかったら、早速Google Fontsを利用してみましょう。大きく分けて3STEPで設定することができます。

1. 利用したいフォントを選ぶ
2. 使いたいスタイルをカスタマイズする
3. コードのコピー・ペースト

1. 利用したいフォントを選ぶ

まず、利用したいフォントの右上にある「＋」マークをクリックします。

すると、画面下に選択したフォントのリストができます。一度に複数のフォントを選択できるので、気になるものは全て「＋」ボタンで追加してみてください。

選択が終わったら、リストの右端の「−」ボタンをクリックします。
　　

2. 使いたいスタイルをカスタマイズする

「−」をクリックすると、上図のようなウィンドウが開きます。「CUSTOMIZE」のタブをクリックし、太字や斜体などのカスタマイズを行います。

初めは、そのフォントの通常スタイルにのみチェックが入っています。太字や斜体など、利用したいスタイルにチェックをつけていきましょう。
　　

3. コードのコピー・ペースト

チェックが終わったら、「CUSTOMIZE」の左隣にある「EMBED」というタブを開きます。

HTMLは上段のコードを「」内にペーストした上でCSSは下段のコードを「font-family」ペーストすることで利用出来ます。

Webフォントの詳しい設定方法は下記の記事を参考にしてみてください。

参考：
印象的でSEOにも有利！日本語Webフォントの設定方法と素材サイト5選｜ferret [フェレット]

まとめ

Webフォントは、全てのユーザーに統一したイメージを訴求でき、管理や更新も容易に行えます。どんどん新しい種類も増えてきているため、作りたいページのイメージにぴったりのフォントを定期的に探してみるのも面白いかもしれません。

中でも「Google Fonts」は、登録も料金も不要なので、初めてWebフォントを試してみたい方にオススメです。日本語の種類は少ないため、利用する際には英数字のみ「Google Fonts」、日本語は通常フォントなどで対応するのも手段です。