トップページ > ブログ > WordPress > wp_enqueue_styleがGoogle Fontsから1つしか読み込まない

wp_enqueue_styleがGoogle Fontsから1つしか読み込まない

WordPressでwp_enqueue_styleを使ってスタイルシートを管理していた際に、Google Fontsを読み込もうとしたら複数読み込もうとしたフォントのうち1つしか読み込まれませんでした。

あまり遭遇しない現象かもしれませんが、たまたまそのような現象に遭遇したのでメモします。

わざわざwp_enqueue_styleせずに直接linkタグ書けばいいじゃんっていうのはなしでお願いします…。

Google Fonts: Browse Fonts
関数リファレンス/wp enqueue style – WordPress Codex 日本語版

Contents

問題だったコード

wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Montserrat&display=swap', false, $version);

問題となるのは、パラメータのfamilyが複数存在していることです。
WordPress側で同じパラメータは一つに統合されてしまいます。

URLを変更する

同じパラメータを複数仕様しないタイプのURLに書き換えます。

wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700|Montserrat&display=swap', false, $version);

familyのパラメータは1つで、「|」を使って複数指定する形で読み込みます。
URLの「css2」が「css」になっている点も注意です。

まとめ

本来正しくは、?family[]=xxx&family[]=xxxとなるのが正しいですが、Googleの仕様なのでそこは変更できませんでした。

もしつまづいた方がいたら救済になれば幸いです。