ie11でsubset=japaneseを入れてもGoogle Fontsの和文フォントが読み込まれない
Googl Fontsから欧文フォントと和文フォントを両方読み込む場合、ie11では欧文フォントだけが読み込まれる現象が発生しました。
対応策としては、欧文と和文のlinkタグをそれぞれ分けると解消します。
背景
Google FontsからEB Garamond、Noto Sans JP、Noto Serif JPの3種類を使用したところ、ie11ではEB Garamondのみが反映され、他の2つが反映されなかった。
// 使用したタグ
<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でGoogle Fontsの和文フォントが反映されない対応策をググると、以下のようにLanguagesのJapaneseにチェックを入れるという記事が見つかるがこれでは解決しなかった。
以下のように、linkタグを欧文と和文で分けることで3種類のフォントが無事反映された。
<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?Noto+Sans+JP:400,500,700|Noto+Serif+JP:500,700&display=swap&subset=japanese" rel="stylesheet">
ie11のためだけにフォントを分けて読むのがしゃくだったので、以下のようにjsでie11の時のみ追加で和文フォントを読み込むようにした。お好きな方で。
<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" rel="stylesheet">
<script>
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.setAttribute('rel','stylesheet');
link.setAttribute('href','https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700|Noto+Serif+JP:500,700&display=swap&subset=japanese');
head.appendChild(link);
}
</script>
その他
今回は和文、欧文で分けて読み込むことで解決したけど、なぜそうなるかという根本的な原因は不明。そのため欧文+和文なら必ず発生するのか、分けて読めば必ず解決するのかというと私の試した環境ではそうだったという感じです。
余談ですが、jsなんか使わずコンディショナルコメント<!--[if IE]>〜<![endif]-->で対応したかったのですが、ie10以降はコンディショナルコメントが効かなくなったんですね。
2020年1/14にWindows7のサポート終了したし、もうieは対応しなくていいだろと思いましたが、ie11のサポートは2025年10/14まででした。長い。
https://coliss.com/articles/build-websites/operation/work/ie11-end-of-support-countdown.html
Author And Source
この問題について(ie11でsubset=japaneseを入れてもGoogle Fontsの和文フォントが読み込まれない), 我々は、より多くの情報をここで見つけました https://qiita.com/shuuuta/items/6182d6aedb5ad4498dfa著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .