【WordPress】wp_enqueue_styleでGoogleFontsが1種類しか読み込めないときの解決方法

WordPressでスタイルシートを読み込むには、wp_enqueue_style()関数を使用します。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
 $handleスタイルシートのハンドルとして使われる一意の名称
 $srcスタイルシートの URL
 $depsこのスタイルシートが依存する他のスタイルシートのハンドル配列
 $verスタイルシートのバージョン番号を指定する文字列 (初期値はWPのバージョン)
 $mediaスタイルシートが定義されているメディアを指定する文字列(例: ‘all’、’screen’、’print’)

引数はたくさんありますが、通常は$handle$srcがあれば問題なく利用できます。

例えばGoogle fontsのNoto Sans JPRobotoを利用する場合は下記になります。

Google fonts

wp_enqueue_style(
  'googlefonts',
  'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap'
);

ところが出力されたソースコードを確認してみると、最後のfamilyパラメータ、この場合Noto Sans JPのみが残り、Robotoが読み込まれていません。

<link rel='stylesheet' id='googlefonts-css'  href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40400%3B700%3B900&display=swap&ver=6.0' type='text/css' media='all' />

wp_enqueue_style関数では、$verを指定しない(falseの)場合、現在インストールされているWordPressバージョンと同じバージョン番号が自動的に追加されます。その際、URLに複数のfamilyがあると最後のfamilyだけに書き換えられます。これは$vernullを指定することで回避できます。

wp_enqueue_style(
  'googlefonts',
  'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap',
  array(),
  null //バージョンを追加しない(調整を防ぐ)
);

ソースコードを確認するとNoto Sans JPRoboto、両方が読み込まれているのを確認できました。

<link rel='stylesheet' id='googlefonts-css'  href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap' type='text/css' media='all' />

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次