ワードプレスでGoogle Fontsが読み込まれないときの対処法

投稿日 2021年6月10日
著者のせっち
カテゴリー WordPress

こんにちは！のせっち@nosecchi01です。

ワードプレスでGoogle fontsを2種類以上読み込ませようとしたら、1種類しか読み込まれていない！？

上記の解決策を解説します！

通常の書き方では正しく読み込まれない？？

2種類のフォントを読み込ませる場合、通常はGoogle Fontsの公式が吐き出すurlの通り、下記のように書くはずです。

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Open+Sans:wght@600;700&display=swap" rel="stylesheet"', array(), '1.0.0', 'all' );

上記の例では、Noto Sans(500, 700)とOpen Sans(600, 700)を選択しています。
＊カッコ内はウェイト

この例だと、Noto Sansは読みこまれません。

解決策：1つずつ読み込む（最も確実）

1つずつ読み込む方法が最も確実です。

wp_enqueue_style( 'google-fonts-noto-sans', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet" rel="stylesheet"', array(), '1.0.0', 'all' );
wp_enqueue_style( 'google-fonts-open-sans', '//fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap" rel="stylesheet"', array(), '1.0.0', 'all' );

フォントファミリーを(|)で繋いで書く方法を紹介している記事を見ましたが、僕の環境では、今度はウェイトが正しく読み込まれませんでした。(medium:500が欲しいのに、regular:400になる）

同様のコードを繰り返し書くのはよくない！と思う方もいるかもですが、確実に読み込める方法を選びます。