【WordPress】複数のGoogleFontsが読み込まれないときの手順

2024年2月7日2024年4月27日

WordPressでは、CSSファイルを読み込ませる方法がいくつかありますが、推奨されているのがfunction.phpにwp_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()の$verをnullすることで複数のフォントが反映されます。

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】と同じです。

WordPress制作についてもっと知りたい方は、『1冊ですべて身につくWordPress入門講座』がとてもわかりやすいです。
ITエンジニアがおすすめする本の大賞＆特別賞を受賞するほど大人気のWordPress本で、初心者の方でもこの一冊があればサイト全体のカスタマイズが可能になるくらい内容が充実しております。

別の解決方法

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

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' );

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