【WordPress】複数のGoogleFontsが読み込まれないときの対処法

WordPressでは、CSSファイルを読み込ませる方法がいくつかありますが、推奨されているのがfunction.phpwp_enqueue_style()関数を用いてCSSを読み込ませる方法です。

しかし、筆者がGoogleFontsを複数読み込もうとしたら一つしか読み込まれなくて絶句。

率直に言うと、wp_enqueue_style()関数は一つしかGoogleFontsを読み込んでくれません

WordPressでGoogleFontsの複数読み込みが効かないとき、どのように回避すればいいのか?

その方法は2つありますので、詳しく解説していきます。

さとみ

ちなみに、<head>内に<link>を直接書くのは無しの方向で…

目次

WordPressでGoogleFontsが正しく読み込まれない問題のコード

function wp_google_fonts() {
  wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Noto+Serif+JP:wght@500;700&display=swap');
}
add_action( 'wp_enqueue_scripts', 'wp_google_fonts' );

HTMLでは、下記のように出力されます。

<link rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap&ver=6.4.2' type='text/css' media='all' />

最初に記述している「Noto Sans JP」が読み込まれず、二番目の「Noto Serif JP」しか反映されないことが確認できます。

wp_enqueue_style()で2種類以上のGoogleFontsを読み込ませる方法

wp_enqueue_style()は下記のように記述します。

wp_enqueue_style( $handle, $src, $deps, $ver, $media )
引数説明初期値
$handleスタイルシートを区別するハンドル名。
すでに登録済みの名前を入れると、新しいスタイルはキューへ追加されないので注意。
なし
$srcスタイルシートのURL。空文字列
$depsこのスタイルシートより前に読み込まれる必要があるスタイルの名前($handle)を指定。array()
$ver任意のバージョン番号を指定できる。新規スタイルを確実に読み込ませる場合などに使用できるため、ブラウザキャッシュ対策になる。false
$media<link>media属性を指定。
例:all、screen、handheld、print
all

ちなみに、バージョン情報 $ver(バージョンパラメーター)は未入力だと WordPressのバージョンが勝手に付与されます。

そのため、【問題のコード】のHTML出力結果のURL末尾には「&ver=6.4.2」があります。

【解決方法1】$verを「null」にする

function wp_google_fonts() {
  wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Noto+Serif+JP:500,700|Noto+Serif+JP:500,700&display=swap', array(), null);
}
add_action( 'wp_enqueue_scripts', 'wp_google_fonts' );

wp_enqueue_style()$vernullすることで複数のフォントが反映されます。

nullの前に$depsが必要なので、初期値であるarray()を入力しておきます。

HTML出力結果

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

URL末尾に付与される「?ver=6.4.2」というようなバージョン情報は消えます

【解決方法2】GoogleFontsのパラメータ:familyを一つにまとめる

function wp_google_fonts() {
  wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Noto+Serif+JP:500,700|Noto+Serif+JP:500,700&display=swap');
}
add_action( 'wp_enqueue_scripts', 'wp_google_fonts' );
  • 2つ目の「family=」を削除
  • フォントは「&」ではなく「|」を使って複数指定
    ※大文字のアイ(I)、小文字のエル(l)、数字の1ではありません。
  • 「wght@」削除
  • 「css2」→「css」
  • ウェイトは「;」ではなく「,」を使って複数指定

この方法は非公式なので、GoogleFontsの公式サイトで発行されるURLをそのまま利用できる【解決方法1】を推奨します。

一つのコードにまとめずフォントごとに分割すればよかったのですが、当時悩んでた頃は、できればまとめたかった意地もあって一時間くらいググりました(笑)

HTML出力結果

<link rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Noto+Serif+JP:wght@500;700&display=swap?ver=6.4.2' type='text/css' media='all' />

バージョン情報「?ver=6.4.2」の有無以外、【解決方法1】と同じです。

別の解決方法

上述の「一つのコードにまとめずフォントごとに分割」がこちら。

function wp_google_fonts() {
  wp_enqueue_style('google-fonts01', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
  wp_enqueue_style('google-fonts02', 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
}
add_action( 'wp_enqueue_scripts', 'wp_google_fonts' );

間違ってはいないのですが、こちらだとコード的にあまり綺麗ではなく、違うコードをたびたび呼び出すのは効率が悪くちょっと気が引けます。

まとめ

いかがでしたでしょうか?

GoogleFontsでバージョン情報を記載する必要も特にないかと思うので、$varnullにする方法で解決すればいいと思います。

二つ以上読み込みたい方は大勢いらっしゃると思うので、今後のアップデートで改善されることを願います!

この現象でお困りの方に、この記事が参考になれば幸いです^^

  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次