Google Fonts（グーグルフォント）をワードプレスに読み込む方法

ワードプレスにGoogle Fontsを読み込むための手順と使用方法について解説します。無料で使えて会員登録なども必要有りません。

では早速始めていきましょう。

Google Fonts へアクセスします。

機能

まず初めに各機能のご紹介です。

文字列を入力することで近似フォントを検索することができます。

サンプル文をプレビューに表示します。

＼customを使ったサンプル文章／

プレビューに表示する時のフォントサイズを調整します。

検索するカテゴリーの絞り込みを設定します。最初から全てにチェックが入っていますので必要に応じて外しましょう。

言語を選択できます。〝Japanese〟を選べばプレビューで日本語に対応したフォントが表示されます。

検索機能の1つでフォントのスタイル数で絞り込みができます。各フォントにはいくつかの文字スタイルが用意されています。文字スタイルとは文字の太さになり（Thin・Light・Regular・Medium・Bold・Black）などがあります。

表示方法をダークモードに切り替えます。

選択したフォントのコードを表示させる時に使用します。

フォントの種類がたくさんあり過ぎてどれを選べばいいか迷ったときは「Sort by Trending」を使いましょう。今のトレンドや人気順で並び替えができます。

機能を理解出来たら実際にどのように使っていくか見ていきましょう。

機能編でご紹介した「Search fonts」・「Categories」・「Language」・「Number of styles」などを利用して使いたいfontを絞っていきます。

今回はカテゴリーを＂Sans Serif＂、Languageを＂Japanese＂で検索した結果の中から表示された「Noto Sans Japanese」を使ってみたいと思います。ポインターを合わしてクリックします。

＂Noto Sans Japanese＂のスタイルは全部で6つあるようですので＂Regular 400＂を選択してみます。

「Select Regular 400 ⊕」の文字が「Remove Regular 400 ⊖」に変わり、「View selected families」のアイコンに赤いマークが付きます。

「View selected families」のアイコンをクリックして次に進みましょう。

選択したフォントのコードが表示されます。

<link>を選択。
フォントを読み込むためのコード（<link href=" から始まるマーカー部分のコード）とフォントのCSSコード（font-family:から始まるマーカー部分のコード）を順番にワードプレスにコピペする。

ここからはワードプレスでの作業になります。先程表示された各コードを指定の場所にコピペしましょう。

［ダッシュボード］→［AFFINGER管理］→［全体設定］→［フォントの種類］→［Googleフォント］

いかがだったでしょうか？フォントを使い分ければ閲覧者側の印象も違ってくるかと思います。

積極的に使い分けをして魅力的なサイトを作ってみてください。以上で「Google Fonts（グーグルフォント）をワードプレスに読み込む方法」を終わります。お疲れ様でした！