Noto Sans JPがIE11で効かない

今回の事象

今更なのですが、Googlefontsで以下のようにheadタグ内でフォントを読み込んでいるにもかかわらず、IE11でなぜか効かず、どうにか打開策はないものかと今回調べてみました。

今まで普通に読み込ませていたlinkタグが以下です。


<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,500,500i,700|Noto+Sans+JP:400,500,700|Noto+Serif+JP:500,700&display=swap&subset=japanese" rel="stylesheet">

最近ではフォントはこのように読み込ませるのが主流かと思いますが、これだとIE11で「Noto Sans JP」を指定しても効きません。

(正直諦めかけていたのですが、今回見事その解決策を見つけました。)

ググって出てきたこと

結構出てきたのが、上記コードの中にはすでに書いてあるのですが「&subset=japanese」を末尾に入れる、ということでした。私はそもそもこの問題にぶつかったときにこのコードを入れていなかったので、もしやこれでいけるかもと思ったのですが、これでは解決されませんでした。

これはコードとして入れる必要はなく、GooglefontsからコードをとってくるときにLanguagesの中にあるJapaneseにチェックを入れると自動的にこのコードが生成されます。

解決した方法

linkタグを以下の2つに分けて記述することで、IE11でも無事、Noto Sans JPが効くようになりました。


<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,500,500i,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese" rel="stylesheet">

私の場合、Noto Sans JPが効かないときに次に指定していた游ゴシックが当たってしまうので、テキストの下部分に余白ができたり、ボタンの中が崩れたりという現象が起こってました。

chromeと比べると若干フォントの太さなどに違いがあるかなという感じはしましたが、そういった文字の崩れは0になりました。

もっと早く知りたかったです。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

(最近IEとばかり戦っていてIEの記事が多くなってきました。)

related article

2020/04/13 HTML

フォームのemail入力欄のtype属性が効かない

2019/10/23 HTML

一般的なSNSシェアボタンの配置