ゆきしょう 
はじめに
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」のスタイルになっていません。
試したこと・確認したこと
- CSSの記述ミスがないか？
font-family: "Inter", sans-serif;と正しく記述されており、問題なし。- アルファベットの大文字・小文字もGoogleの指定通り。
- 優先順位（詳細度）の問題？
!importantをつけてみても変化なし。
- デベロッパーツール（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は自動的に現在のWPバージョン番号などを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が正しく読み込まれるようになりました！
まとめ
- Google Fontsが反映されない時は、CSSだけでなく「正しくファイルを読み込めているか（Networkタブ）」を確認する。
wp_enqueue_styleを使う際、外部URL（特にGoogle Fontsのような長いパラメータを持つもの）を読み込む場合は、第4引数をnullにするのが鉄則。- 「CSSは完璧なのに…」とハマった時は、WordPressのおせっかい機能（自動バージョン付与）を疑ってみよう。
同じ現象で悩んでいる方の参考になれば幸いです！
