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

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 [フェレット]