どうも！Web制作•動画編集フリーランスのTERUQ（テルキュー）です！
WEB担当者ってチラシやバナー作成などの際、フォントを意識しますよね。
またWEBサイトでもフォントを意識すると思います。
フォントってたくさんあって結構センスが出るのかなぁと思います。
フォントを探す時におすすめなのが、無料のGoogle Fontsです！
チラシやバナー制作、WEBサイトで好きなフォントを使うことができます！
今回はGoogle Fontsの基本的な使い方についてご紹介します！
この記事はこんな人におススメ！
・Google Fontsを使いたい！
・チラシやバナーを作成する！
・WEBサイトの管理•更新等を担当している！
・WEB担当者やWEBマーケター！
Google Fontsとは
Google FontsはGoogleが無料で提供していて、フォント数もとても多く、使い方も簡単です！
Google FontsはGoogleアプリの中にあり、『その他のソリューション』をクリックし、サービス一覧のところにあります！もちろん、『Google Fonts』と検索しても大丈夫です！
フォントをダウンロードする
使い方はとてもシンプルです。フォント名がわかっている場合は、検索ボックスのsearchにフォント名を入力します。
フォント名がわからない場合は、cutstomの右横にテキストを入力すると、そのテキストのフォントを確認できますので、お好みのフォントを選ぶことができます。
ダウンロードして使いたいフォントが決まったらクリックします。すると、このような画面になるので、右上にある『Download family』をクリックすると、フォントをダウンロードできます。
ダウンロードしたフォントはzipになっているので、解凍して、インストールするとOKです！あとは、Photoshopやillustrator、エクセルなどで確認してみるとフォントを使えるようになっています！
ちなみに、ここでも好きなテキストを入力すると、そのテキストのフォントを確認できます。
WEBサイトでGoogle Fonts使う場合
フォントを選択する
Google FontsはWEBサイトでも使うことができます！
こちらも使い方は簡単です！
先ほどと同様に、使いたいフォントを選んでクリックします。
同じフォントでも太さが違ったり、斜体だったりするので、使いたいフォントを決めて、『+Select this style』をクリックします。
HTMLの<head>内に貼り付ける
右上のブルーの四角いアイコンをクリックすると、選択したフォントが横に表示されます。
『Review』になっているので、『Embed』に切り替えます。
そして、＜link＞のlink href=〜〜をすべてコピーして、WEBサイトのHTMLの<head>〜＜/head>内に貼り付ければOKです！
CSSで指定する
次に「CSS rules to specify families」に書かれているコードをコピーします。そしてCSSファイルのh2の見出しなど、フォントを適用させたい部分に記述します。
h2に使用する場合はこんな感じでOKです！
フォントの探し方
先ほどのようにフォント名がわかっている場合は、検索ボックスのsearchにフォント名を入力してフォントをダウンロードします。他にも絞り込んで検索できるので、ご紹介します。
フォントのカテゴリーで探す
フォントのカテゴリーで絞り込んで検索することもできます。
Google Fontsはとてもたくさんのフォントがあるので、絞り込んで検索するのがいいかもですね！
カテゴリー
Serif：明朝体
Sans Serif：ゴシック体
Display：装飾文字
Handwriting：手書き風文字
Monospace：等幅文字
言語で探す
言語別で検索することも可能です。
フォントの太さや斜体で探す
フォントの太さや斜体でも絞り込み検索することができます。
Number of styles：指定できるスタイルの数（太字と斜体の数）。
Thickness：太さ。右につまみを動かせば太字のものだけ表示、左に動かせば細字だけ表示
Slant：斜体。右につまみを動かすと斜体フォントだけが表示。右ほど斜め具合が強くなる
Width：文字幅。左につまみを動かすと幅の小さいものだけ表示、右に動かすと幅の大きいものだけ表示
並び替えをする
人気順やフォント名順に並び替えて表示することができます。
まとめ
いかがでしょうか。Google Fontsとても便利です。
チラシやバナー制作、またWEBサイトなどいろいろな場面で使用することができます！
Google Fontsには日本語のフォントも少しあります。