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

こんにちわ、@taichi_kimuraです。

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

Google日本語フォントとは?

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。

Google Fonts + 日本語より

キレイな日本語フォントを無料で簡単に使えるので、最近ではテーマに組み込まれて使用できるようになっていたりして使用頻度が高くなっている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">';
}

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

ではまた。

この記事を書いた人

木村 太一

ドットワンの代表です。1979年生まれ。3女の父。ゴルフと筋トレが趣味。立川にあるキヤノン代理店に就職後、1万件以上飛び込み営業したのち独立。たくさんの企業を見てきた経験と自分自身も零細企業の経営者ということを活かし、相手の立場に立ったITコンサルを行っております。