ゆきしょう 
こんにちは、ゆきしょうです。
WordPressで自作テーマを作っている時のことです。
Google Fonts（InterとJost）を読み込もうとしたのに、なぜか反映されませんでした。
CSSのスペルミスか、フォント名の大文字・小文字の違いか、いろいろ疑いました。
でも原因は、意外なところにありました。
この記事では、その落とし穴と直し方をまとめます。
長いGoogle FontsのURLを wp_enqueue_style で読み込む時に起きる話です。
状況：フォントが当たらない
使おうとしていたのは、次の3つのフォントです。
- Noto Sans JP
- Inter
- Jost
SCSS（CSS）側では変数を定義し、正しく指定しています。
SCSS
// _variables.scss
$base-font: "Noto Sans JP", sans-serif;
$second-font: "Inter", sans-serif;
$third-font: "Jost", sans-serif;
// _c-contact.scss
.c-contact__title {
font-family: $second-font; // Interが当たるはず
}デベロッパーツールで見ても、CSSは効いているはずでした。
それなのに表示されるのは、PCのデフォルトフォント（sans-serif）だけ。
「Inter」や「Jost」のスタイルになっていません。
試したこと・確認したこと
1. CSSの記述ミスがないか？
font-family: "Inter", sans-serif;と正しく書けていて、問題なし。- アルファベットの大文字・小文字もGoogleの指定どおり。
2. 優先順位（詳細度）の問題？
!importantをつけてみても変化なし。
3. デベロッパーツール（Networkタブ）の確認
- ここでエラー（400 Bad Request）が出ていることに気づきました。
原因：WordPressが勝手につける「バージョン番号」
原因は、functions.phpでスタイルを読み込む時の書き方にありました。
▼ 修正前のコード（NG）
PHP
wp_enqueue_style(
'google-fonts',
'https://fonts.googleapis.com/css2?family=Inter:ital...（中略）...display=swap',
false
);wp_enqueue_style の第4引数は、バージョン番号です。
ここを指定しないか false にすると、WordPressが番号を自動で付けます。
URLの末尾に付く ?ver=6.x.x のような番号です。
これが原因でした。
Google FontsのURLはとても長く、フォントやウェイトを増やすとさらに長くなります。
そこへWordPressが ?ver=... を勝手に付け足します。
その結果、URLの形がGoogle Fonts側の仕様と合わなくなり、読み込みエラーを起こしていたのです。
解決策：第4引数を「null」にする
直し方はシンプルです。
wp_enqueue_style の第4引数に null を指定して、バージョン番号を付けないようにします。
あわせて、URLの中の & 記号などが意図せず変換されないよう、一度変数に入れて整理しました。
▼ 修正後のコード（OK）
PHP
// URLを変数に入れて整理（可読性もアップ）
$font_url = 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap';
// 第4引数を null に指定！
wp_enqueue_style('google-fonts', $font_url, array(), null);これで ?ver=... が付かなくなり、Google Fontsが正しく読み込まれるようになりました。
ちなみに、サイトの表示が重いと感じたら
今回のようなフォントの読み込みの話とは別に、サイト全体の表示速度に不安があるなら、サーバーを見直すのも一つの手です。
WordPressの高速化に力を入れているサーバーだと、体感できるくらい変わることがあります。
シンレンタルサーバーはPHPの高速化機能を搭載していて、独自ドメインも永久無料です。
表示速度が気になっている方は、一度チェックしてみてください。
まとめ
- 反映されない時は、CSSだけでなくNetworkタブで読み込みエラーを確認する。
- 長いURLを
wp_enqueue_styleで読み込む時は、第4引数をnullにする。 - 「CSSは完璧なのに…」とハマった時は、WordPressのおせっかい機能（自動バージョン付与）を疑ってみる。
同じ現象で悩んでいる方の参考になれば幸いです。
以上、WordPressでGoogle Fontsが反映されない原因と直し方でした。
