WEBサイトやブログで便利なGoogle Fonts（グーグル・ウェブフォント）の導入方法と使いのまとめです。
Webサイトをデザインする際、フォントはWebサイトの雰囲気を左右する重要な要素になります。
HTMLやCSSが初心者の方でも分かるように丁寧に解説していきます。
目次
1. Google Fontsとは？
このように、利用できるフォント一覧が表示されます。完全無料でWEBフォントを使用できます。商用利用も無料です。
1-1. WEBフォントとは？
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出して表示する仕組みのことです。
通常のフォントの場合
WEBページを閲覧する端末にインストールされているフォントしか表示できません。一般的な家庭用PCでは、予めインストールされているフォントは少なく、また、基本ソフトとなるOC（オペレーティング システム）のバージョンにより、標準搭載されるフォントが異なるため、使用できるフォントも限られていました。
WindowsかMacかiPhoneかAndroidかによって標準搭載されているフォントも異なるため、統一した文字を表示させることができないわけですね。
WEBフォントを利用すると
WEBフォントであれば、サーバーから読み込むため、どの端末でも共通のフォントで表示させることができます。
【メリット1 】SEO効果を保ったまま、デザイン性を高めることができる
Webフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点です。
ユーザー環境に寄らず、豊かなデザイン表現が可能となったことで、作成者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができるようになりました。
従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置してきました。しかしこの方法では、検索エンジンの情報収集ロボット「クローラー」に画像と判定され、記載した文字情報は理解されません。
多彩なスタイルを持つWebフォントの出現でテキスト表現の幅が広がり、クローラーにしっかりと内容を伝えられ、かつデザイン性の高いWebサイトが構築できるようになりました。
【メリット2】レスポンシブWebデザインに適している
スマートフォンなどのモバイル端末の普及やGoogleが推奨したことで、現在のWebサイト構築方法の主流となっているレスポンシブWebデザイン。画面サイズの異なる複数のデバイスに対応するWebサイトでは、折り返し位置やサイズ調整が自動で行われる「テキスト」での表現が最適です。
また、従来のようなデザイン性の高い箇所を画像で配置する方法では、対応するデバイス分の画像パーツの用意が必要になるなど、構築にも更新にも手間と時間が掛かります。Webフォントの出現は運用コストの削減にもつながっています。
ページの読み込み速度は遅くなる？
使用するフォント種類が増えるほど重くなりますが、Googleの高速サーバーから読み込むことができるので、数種類の英語WEBフォント使用であれば気にならないはずです。
Google Fontsに日本語はあるの？
日本語フォントが正式に採用されました。(2018年10月)
サイドバーの「Language」で「Japanese」を選択すれば、日本語フォントのみを表示することができます。完全無料でWEBフォントを使用できます。商用利用も無料です。
使い方や設定方法などは英語のフォントと同じです。ただし、フォントファイルが数MB〜数十MBとかなり重くなってしまうことがあるので注意しましょう。
日本語はひらがな・カタカナに加えて無数の「漢字」まで読み込まなければならないため重くなるわけですね…。表示速度を取るか、フォントの美しさを取るか、判断が難しいところです。
英語のアルファベットだけGoogle Fonts、日本語は通常の指定で利用する
表示速度を優先したい場合は、英語のアルファベットだけGoogle Fonts、日本語は通常の指定で利用する方法もあります。
2. Google Fontsの使い方
Google Fontsの導入方法と使い方を解説します。
1. 利用ページにアクセス
まずはこちらのページを開きましょう。Google Fonts
利用できるフォントがずらっと表示されます。下にスクロールすればフォントがどんどん表示されます。
この中から使いたいフォントを選びます。フォントの探し方については後ほど説明します。とりあえず導入手順をちゃちゃっと解説しちゃいます。
2. 使用するフォントを選ぶ
使いたいフォントがあったときは右上のをクリックします。
すると画面下側のリストの中に追加されます。使いたいフォントが複数あるときはそれもで追加しましょう。
をクリックすれば削除することができます。
3. 太さなどのスタイル設定をする
追加が済んだら、画面下の黒いバーの「-」をクリックしましょう。これで追加した文字の設定ウィンドウが開きます。
ウィンドウの上部には追加されているフォントが一覧で表示されます。
その下にある[CUSTOMIZE]をクリックします。ここで太字や斜体を使うかどうかを決めることができます。
初期設定では普通の大きさのフォントしか使わない設定になっています。太字や斜体を使いたい場合は、使いたいスタイルにチェックを入れます。
スタイル数が多くなるほど読み込みデータが重くなるので、本当に使うものにだけチェックを入れましょう。
4. HTMLにフォントの読み込みコードを貼る
スタイル設定ができたら[EMBED]をクリックします。
下側に<link rel...というコードが載った部分があるはずです。これをまるっとコピーします。
コピーしたコードは<head>〜</head>の中のどこかに貼ります。ただしブログサービスによって貼り方は少し異なります。
link rel〜を貼る場所
- WordPress：[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]⇒headタグ内
- はてなブログ：[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
- Livedoorブログ：[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]⇒headタグ内
- FC2ブログ：[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]⇒headタグ内
- Blogger：[テンプレート]⇒[HTMLの編集]⇒headタグ内
【参考】CSSから読み込む場合
HTMLをいじらずにCSSから読み込むこともできます。その場合は@importをクリックして表示されるコードをまるっとコピーしてCSSファイルのどこかに貼りましょう（@charset〜のすぐ下で良いかと思います）。
手順5. CSSでfont-familyを指定
あとはCSSでfont-familyに使いたいフォント名を記載するだけです。もう一度Google Fontsに戻ります。
ウィンドウの下側にある「font-family:’◯◯’」というところでフォント名が確認できます。これをコピーしてfont-familyに追加します。
font-familyの指定の仕方
こちらの記事を参考にすると良いかと思います。
もしCSSにfont-family:〜が書かれている場合、その中の１番先頭にフォント名を貼り付けます。
例 body {font-family: ‘Quicksand’, ‘ヒラギノ角ゴシック’, ‘メイリオ’ ,sans-serif;}
ページ全体にWEBフォントを使いたい場合はbody {font-family: 'フォント名',...}というように書きます。見出しにだけ使いたい場合などはh2 {font-family: 'フォント名',...}というように書きます。
これらのWEBフォントは日本語を表示できないので、日本語のフォント名と合わせて書くのがおすすめです。
手順6. 表示される！
これで導入完了です。ページを読み込めばWEBフォントが表示されるようになります。参考：CSSのデザイン変更が反映されない時の対処法
【参考】太字で表示させたいときは？
WEBフォントを太字で表示させたいときにはCSSで指定をします。font-family:〜;と合わせてfont-weight:boldと書けば太字で、font-weight:lighterとすれば細字で表示されます。詳しくはこちらの記事が参考になるはずです。
3. 効率的なWEBフォントの探し方
Google Fontsにはたくさんの種類のWEBフォントが登録されています。目的に合ったフォントを効率的に探せるようにフィルターを使いこなしましょう。
まず、画面右上の虫メガネのアイコンをクリックします。
すると検索のフィルターメニューが表示されるようになります。1つずつ見ていきましょう。
3-1. 書体でフィルターをかける
SerifやSans Serifのチェックを外すことで「明朝体のフォントだけ表示させる」というようなことができます。
Serifは明朝体、Sans Serifはゴシック体、Displayというのは華やかな装飾のある書体、Handwritingは手書き文字、Monospaceは1文字の幅が全て同じフォントのことです。
3-2. 太さや斜体でフィルターをかける
フォントによって太字や斜体の数が異なります。太さを7種類から選べるフォントもあれば、太字を全く使うことのできないフォントもあります。以下の4つのフィルターを使うことで「ものすごく太いフォントだけ表示させる」ようなことができます。
- Number of styles：指定できるスタイルの数（太字と斜体の数）。
- Thickness：太さ。右につまみを動かせば太字のものだけ表示、左に動かせば細字だけ表示
- Slant：斜体。右につまみを動かすと斜体フォントだけが表示。右ほど斜め具合が強くなる
- Width：文字幅。左につまみを動かすと幅の小さいものだけ表示、右に動かすと幅の大きいものだけ表示
3-3. 人気順や新着順で並び替える
[Sorting]を変えることで並び順を変更することができます。
- Trending：トレンドのものから表示
- Popular：人気順で表示
- Date Added：新着順で表示
- Alphabetical：アルファベット順で表示
4. 例文の表示を変更する
Google Fontsではフォントごとにサンプル文字列が表示されています。この文字列は簡単にカスタマイズできます。
4-1. 文字列を変える
変えたい文字列にカーソルを当て、Deleteを押せば消えます。そのまま試したい文字を入力すればOKです。
4-2. 変えた例文を全フォントに適用
全例文を統一した方が比較しやすいですね。[APPLY TO ALL FONTS]をクリックすれば、全例文が同じ文字列になります。
4-3. 段落文で表示
初期設定では見出しっぽく例文が表示されています。[Sentense]をクリックして[Paragraph]を選べば、例文を段落文に変えることができます。
4-4. サンプル文字の大きさを変更
◯◯pxと表示されている部分のつまみを調整することで表示される文字の大きさを変えることができます。
4-5. 太さを変更
その左隣にある[Regular400]というところからはサンプル文字の太さを変えることができます。
最後に
Google Fontsをうまく使えばユニークでオシャレなWEBサイトに見せることができます。とはいえ「オシャレ＝読みやすい」ではないので、読ませたい部分で使うときには注意が必要ですね。
