IEとEdgeでGoogle日本語フォントが表示されない場合の対処法【WordPress対応】

こんにちは、木村太一です。

タイトルの通りですが、お客様サイトで発生したので解決方法を記載しておきます。

Google日本語フォントとは？

キレイな日本語フォントを無料で簡単に使えるので、最近ではテーマに組み込まれて使用できるようになっていたりして使用頻度が高くなっているGoogle日本語フォント。

困ったことにIEをサポートしておらず、Google日本語フォントが表示されず、デフォルトのフォントで表示されてしまいます。

IEとEdgeで表示する方法

表示する方法は簡単でした。Google日本語フォントを読み込む際に、「&subset=japanese」を追加してあげます。

通常の読み込み（さわらび明朝）

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

IE・Edge対応の読み込み（さわらび明朝）

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&subset=japanese" rel="stylesheet">

これで解決できました。

functions.phpに書いている場合も同じです。

function theme_name_scripts() {
wp_enqueue_style ( 'googlefont', 'https://fonts.googleapis.com/css?family=Sawarabi+Mincho&subset=japanese');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

補足：Edgeで電話番号がリンクになるのを防ぐ方法

Google日本語フォントとは関係ないですが、意図しない表示なるという意味で追記しておきます。

Edgeの場合、電話番号に勝手にリンクが付いて困る場合があります。詳細は割愛しますが、下記で対応可能です。

こちらもfunctions.phpに記載します。

//ヘッダーに追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
  echo '<meta name="format-detection" content="telephone=no">';
}

ブラウザごとの対応って本当に面倒ですね。

ではまた。