WordPressでGoogleFontsを利用するとき、その読み込み方法はいくつかありますが、この記事ではfunctions.php内などで、wp_enqueue_style()関数を使って読み込みを行う場合の話を書いています。
私に起きたトラブルは、wp_enqueue_style()を使って2種類を含むGoogleFontsの読み込みを行ったところ、1種類のフォントしか正しく読み込まれなかった。というものです。
結論、wp_enqueue_style()の$ver（バージョンパラメーター）に「null」を渡すことで問題を解消できます。
この記事では、GoogleFonts2種類以上をコード的に美しく読み込ませる方法を紹介＆解説しています。
WordPressでGoogleFontsが正しく読み込まれない
まず、問題の様子です。
GoogleFontsの公式サイトから読み込み用のURLを取得し、以下のようにfunctions.php内にてwp_enqueue_style()を使ってフォントファイルの読み込みを試みます。
ポイントは、2種類のGoogleFontsを読み込もうとしている点。NotoSansJP と NotoSerifJPを読み込みたいのですが、こちらが上手くいかないのです。
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );このソースを実行後、出力されたHTMLを確認してみます。
<link rel='stylesheet' id='googlefonts-css' href='//fonts.googleapis.com/css2?family=Noto+Serif+JP%3Awght%40400%3B700&display=swap&ver=6.1.1' type='text/css' media='all' />よく見ると、NotoSansJPが消え、NotoSerifだけ読み込まれていることがわかります。つまり、NotoSansJPのフォントが表示されないというのが問題です。
wp_enqueue_style()で2種類のGoogleFontsを読み込ませる方法
冒頭でも答えを出しましたが、wp_enqueue_style()の$ver（バージョンパラメーター）に「null」を渡すことで問題を解消できます。
以下のような書き方ができます。$verは引数の4番目なので、3番目の$depsにはとりあえず空の配列を設定しておきます。※最後5番目の$mediaは省略でいいです。
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );これで、実行した結果出力されるHTMLは以下の通りです。
<link rel='stylesheet' id='googlefonts-css' href='//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap' type='text/css' media='all' />URL部分の末尾に「ver=6.1.1」というようなバージョン情報は消えますが、無事2種類のGoogleFontsが読み込まれました。
考察
少しだけwp_enqueue_style()についての話ですが、以下のような引数を与えて実行できます。
wp_enqueue_style( $handle, $src, $deps, $var, $media );
| $handle | ハンドル名。識別子のような役割で他と被らない文字列 |
| $src | スタイルシートのパス |
| $deps | 先に読ませておきたいハンドル名の配列（省略可能） |
| $ver | スタイルシートのバージョン（省略した場合はWordPressのバージョン） |
| $media | スタイルシートが定義されているメディアを指定する（省略可能） |
通常、$handleと$src部分を設定すれば、後はあまり気にせず省略してしまっても動きます。
先の正しく読み込めなかった例では、$verを省略していたので、デフォルトのfalseで動いていました。$verがfalseの場合、WordPressのバージョンを付与する振る舞いをします。
「href=’//●●●●&ver=6.1.1’」 ←こんな感じ
調べてみたところ、どうやらこれを追加する処理過程で問題が発生するみたいです。
GoogleFontsの公式で2種類以上のフォントの読み込む場合のコードを考察すると、URLの中でフォントの種類毎に「&family=」が登場しています。
これがPHPによる処理過程で同じものと判断されて、どんどん上書きしていく→最終的に最後のやつが生き残る。
ということらしいですね。
そこで、$ver（バージョンパラメーター）に「null」を渡し、URLにverを追加する処理をさせないことで問題が解消されるという理屈です。
WordPressがWebフォントのURLにverを追加しなくなりますが、そもそも外部URLに対してローカルのバージョン情報を与える意味がありませんから、問題ないと考えています。
別の解決手段について
オススメはしませんが、以下のようにwp_enqueue_style()を2つに分けて、フォントファミリーの種類分記述してあげることで問題を解決させることもできます。
つまり、もともと読み込むフォントの種類が1つであれば、最初に上手くできなかった例での方法でも問題ないということです。
wp_enqueue_style('google-fonts1', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' );
wp_enqueue_style('google-fonts2', '//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap' );しかしながら、2回もWebfontの取得にリクエストを出すことになり効率も悪く、スマートではないので個人的には好みません。
他にもURLを改造して、「｜」で分けて複数指定する方法の紹介も見かけましたが、GoogleFontsの公式サイトで発行されるURLをそのまま利用するのが最善と考えます。
まとめ
WordPressで2種類以上のGoogleFontsが読み込まれない場合の解決案を紹介しました。ただ、結構前から言われている問題かと思いますので、そのうちWordPress側かGoogleFonts側かで対策される気もします。
（色々調べているとGoogleFonts側が空気読め。という考えが多い感じですね笑）
いずれにしても、私と同じ問題でお困りの方の参考になれば幸いです♪
