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

こんにちは!のせっち@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になる)

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

おまけ:フォントが正しく読み込まれているか確認するなら

Google Fontsが正しく読み込まれているかを確認する最もいい方法はFonts Ninjaを使うことですね!

Chrome拡張機能を入れるだけです!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。