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