この記事では、WordPressでGoogleフォントをfunctions.phpを使って反映する方法を解説します。

こんな方におすすめの内容です。

これを機にGoogleフォントの反映方法と管理を最適化しましょう！

WordPress公式がfunctions.phpからの反映を推奨

はじめに、なぜfunctions.phpからGoogleフォントを読み込むべきかを解説します。

理由は、引用の通りWordPress公式が「スタイル・スクリプトはfunctions.phpのenqueueにまとめるべき」と述べているからです。

The proper way to add scripts and styles to your theme is to enqueue them in the functions.php files. 

テーマにスクリプトやスタイルを追加する適切な方法は、 functions.php ファイルにエンキューすることです。（Goolge翻訳）

引用元：WordPress Developer Resources

具体的には、

といった大きなメリットも含まれます。

これを機に、header.php内に直接記述している方などはぜひ、funcitons.phpを使用した管理に切り替えましょう！

functions.phpからGoogleフォントを読み込んで反映させる方法

では早速、実装方法を紹介します。

下準備として、先にGoogleフォントのサイトから使用するフォントを決めてください。

※当記事、Googleフォントのサイト自体の操作方法については触れません。

手順①：使用したいGoogleフォントの埋め込み用リンクを取得する

まず、使用したいフォントをクリックし、詳細画面に進んだら下記画像の通り、「Get font」をクリックします。

次に、下記画面に遷移するので続いて「Get embed code」をクリックします。

そうすると、以下のような埋め込み用のコードが表示された画面が出てきます。

この画面と同じ形式の画面が出ていれば、「手順①：使用したいGoogleフォントの埋め込み用リンクを取得する」は完了です。

補足：複数種類のフォントを読み込みたい場合

手順は同じです。

複数種類のフォントを読み込みたい場合も、「Fonts」をクリックしてフォント一覧画面まで戻り、追加したいフォントを選択します。

そして次に、先程の手順①の最初にクリックしたものと同じ「Get font」を選択すれば下記のようにスタイルが追加されます。

都度一覧ページに戻り、使用するフォントを選択後、「Get font」をクリックして追加していく、という流れです。

手順②：functions.phpに記述する関数に当てはめる

では次に、手順①で取得したコードをfunctions.phpに記述する関数に当てはめていきます。

当てはめる関数の雛形はこちらです。

function お好きな関数名を入力()
{
  wp_enqueue_style(
    'お好きなラベルを入力',
    '取得した埋め込み用リンクをここに貼り付け',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', ‘入力したのと同じ関数名を入力');

あえて、皆様の環境との差分がわかりやすいように、変更が必要な部分を日本語にしております。

この雛形に具体的な関数名などを指定すると、以下のような内容になります。

function webful_enqueue_google_fonts()
{
  wp_enqueue_style(
    'webful-google-fonts',
    'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900&display=swap',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', 'webful_enqueue_google_fonts');

これは実際に当サイトで使用しているコードです。

関数名は、テーマ名_enqueue_google_fonts。識別子名は、テーマ名-google-fontsにしています。

埋め込み用のURLは、2種類のスタイルを選択して取得したものを使用しています。

ここまでの方法で、functions.phpに該当のコードが記述できていれば、「手順②：functions.phpに記述する関数に当てはめる」は完了です。

手順③：font-familyの指定をする

それでは最後に、font-familyを指定して実際のサイトのテキストにスタイルを当てていきます。

埋め込み用のコードが表示されている画面に記載のあるfont-familyを参考にCSSを記述します。

たくさんの指定内容が載っていますが、基本font-family以外は無視して問題ないです。

文字を太くしたい、斜体にしたいなどのときは適宜適用してあげれば反映されます。

これで、functions.phpからGoogleフォントを読み込んで反映する手順は終了です。

次章では、複数種類のフォントスタイルを読み込む場合のfont-familyの管理方法をご紹介します。

おすすめのfont-family管理方法

実際の制作現場で、1種類のフォントだけで完結するケースはほとんどありません。

このサイトでも、本文はNoto Sans JP、英数字はRobotoといったように、用途によってフォントを使い分けています。

ここでは、こうした2種類以上のフォントスタイルを使用する場合におすすめのfont-family管理方法を紹介します。

前提条件として、ファイル構造はFLOCSS、クラス命名はBEMを採用しています。

結論：font-familyを変数化し、コンポーネントで呼び出す

複数のフォントを扱う際に最も保守性が高いのは、font-familyを変数に代入し、必要なところで呼び出す運用方法です。

では、具体的な実装方法を紹介します。

手順①：Googleフォントで取得したfont-familyを変数に代入する

まず、先程のGoogleフォントで取得したfont-familyを、それぞれ変数に代入します。

/* global/valiable.scssを使用
----------------------------------------------------------------- */

// font-family
$noto: 'Noto Sans JP', sans-serif;
$roboto: 'Roboto', sans-serif;

このとき、変数の定義場所は自由ですが、私はFLOCSSに基づいてglobalフォルダ内のvariable.scssにすべてまとめています。

→ フォント変更が必要になったとき、該当の変数と対応するモディファイアを調整するだけでいいのが大きなメリットです。（モディファイアについては次節で解説します。）

手順②：使用したい要素で変数を呼び出して適用する

続いて、先程定義した変数をfont-familyを反映したい要素で使用します。

ここではSassの@useの詳細説明は割愛しますが、

@use '../global' as g;

このように記述することで、global/variable.scssの変数をg.$robotoのように参照できるようになります。

/* object/component.scssを使用
----------------------------------------------------------------- */
@use '../global' as g;

// card-media
.c-card-media {
  &__text {
    &--roboto {
      font-family: g.$roboto;
    }
  }
}

上記の例では、BEMのモディファイア–robotoを追加し、そこに変数を呼び出しました。

→ モディファイア名に使用するフォントスタイル名を使用することをルール化すれば、削除や変更に柔軟に対応することもできます。

反映されない場合のチェック項目

ここまで、Googleフォントの反映方法を紹介してきましたが、皆様の中には既に使用中のGoogleフォントが反映されない現象が発生している方もいると思います。

そのような方向けに、ここでは反映されない原因の特定と解決に向けたフローチャートとチェックリストを紹介します。

Googleフォント反映のためのフローチャート

こちらで紹介するフローチャートは、①のチェックリストから順に確認することでGoogleフォントを反映できるように設計しています。

基本的には、検証ツールでfont-familyが打ち消されているかどうかで原因が特定できます。

打ち消されている状態の参考画像

大まかに言うと、キャッシュクリア→font-family確認→症状に合わせた解決、といった流れです。

次節では、それぞれの症状とチェックリストに対応した具体的な解決方法も解説しているのでぜひご活用ください。

Googleフォント反映のためのチェックリスト

ここでは、先程紹介したフローチャートと同じ色分けで、各チェックリストで行うべき具体的な対処方法と、それら対処法で解決したい原因をまとめました。

早速ですが、まず「共通」のチェックリストの2項目を確認しましょう。

こちらでは、キャッシュクリア後、②指定したfont-familyは打ち消されているかを確認し、【予想される症状】の中から当てはまるパターンを探します。

どのパターンに当てはまるかが分かれば、おおよその原因が特定できた状況です。

あとは、そのパターンから考えられる原因に合わせて対処していきます。

※font-familyが打ち消されている状態がどういったものかは、前章のこちらで解説しております。

function お好きな関数名を入力()
{
  wp_enqueue_style(
    'お好きなラベルを入力',
    '取得した埋め込み用リンクをここに貼り付け',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', ‘入力したのと同じ関数名を入力');

以上が簡単ではありますが、Googleフォント反映のためのチェックリストです。

他にも反映されないパターンはあるかと思いますが、共通しているのはGoogleフォントが読み込めているかとCSSが効いているかの2軸で検証することが重要ということです。

むやみに埋め込みコードを追加することは、読み込みの重複につながるのでおすすめしません。

一旦、使用中の環境がどのようにGoogleフォントを使用しているかを確認するところから始めましょう。

まとめ

いかがでしたでしょうか。

今回は、functions.phpからGoogleフォントを反映する方法について解説しました。

サイトのデザイン性を確保しつつ、サイト表示の高速化のためにも今回のfunctions.phpを使用した方法はおすすめです。

次回の記事では、Googleフォントをローカルホストで読み込む方法について紹介します。

それでは、別の記事でお会いしましょう〜