WordPressでGoogle Fontsが読み込めない問題の解決方法

safariブラウザでのみGoogle Fontsが読み込めない謎の不具合が出てます!

本記事では、WordPressオリジナルテーマ制作時に、
SafariブラウザでのみGoogle Fontsが、読み込めないという不具合が
発生したため、 その原因と解決方法をまとめております。
今回は前提としてGoogle Fontsの<link>を使った読み込み方法で解説しています。

目次

発生している問題の説明

状況を詳しく教えてごらん。

はい。
今、WordPressオリジナルテーマ開発をしています。
そこでGoogle Fontsの『Courgette』というフォントを使用したいのですが、
Safariブラウザでのみうまく読み込めていないようです。
Google ChromeとFire foxでは読み込めています!

使用したいフォント
safariでの表示(フォントが未反映)
他ブラウザでの表示(反映できている)

なるほど。
WordPressオリジナルテーマでGoogle Fontsを読み込むときは、
functions.phpに読み込むためのソースコードを記入するよね。
functions.phpのソースコードを見せてごらん。

// css読み込み
function my_enqueue_style()
{
    wp_enqueue_style('font-montserrat-noto-courgette', '//fonts.googleapis.com/css2?family=Courgette:wght@400&family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"');
}
add_action('wp_enqueue_scripts', 'my_enqueue_style');

ふむ。
今回は<link>でGoogle Fontsを使用しているから、
wp_enqueue_style()関数の中でCSSを読み込もうとしているのは正解じゃ。

しかし、wp_enqueue_style()の扱いに注意が必要じゃ。
以下のようにソースコードを入力しなおせば、フォントが表示できるぞ。

Google Fontsが読み込めない問題解決方法

// css読み込み
function my_enqueue_style()
{
    wp_enqueue_style('font-montserrat-noto-courgette', '//fonts.googleapis.com/css2?family=Courgette:wght@400&family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"',array(),NULL,'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_style');

ここから解決方法を説明するぞ。
Google Fontsがうまく読み込めていない原因は、恐らく、wp_enqueue_style()の第4引数($ver)を指定できていないからじゃ。wp_enqueue_style()の引数は以下のようになっておる。

wp_enqueue_style($handle, $src, $deps, $ver, $media);
引数説明初期値
$handleスタイルシートを区別するハンドル名を指定。なし
$srcスタイルシートへのURL(パス)を指定。false
$deps依存スタイルシート(このスタイルシートより前に読み込まれる必要があるシート)のハンドル名を配列で指定します。
この引数でスタイルシートの読み込み順を制御できます。
array()
$verスタイルシートの任意のバージョンを指定します。
バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策に使えます。
false
$mediaスタイルシートのメディアを指定。all

これに対して最初に見せてくれたソースコードは第1引数($handle)と第2引数($src)しか明記できておらん。

// css読み込み
function my_enqueue_style()
{
    wp_enqueue_style('font-montserrat-noto-courgette', '//fonts.googleapis.com/css2?family=Courgette:wght@400&family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"');
}
add_action('wp_enqueue_scripts', 'my_enqueue_style');

入力されていない第4引数($ver)が初期値(false)になっているのがまずいようじゃ。
バージョン指定がない場合はNULLを入力するように癖付けよう!
他の引数もエラー防止のために未入力ではなく、初期値を入力するように癖付けるのじゃ!

なるほどです!
想定外のことが起こらないよう、これからは省略せずに値を入力しておくように気をつけます。

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

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