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の仕様なのでそこは変更できませんでした。
もしつまづいた方がいたら救済になれば幸いです。