IEでGoogle Fontが効かない！？　対処法

GoogleFontのおかげで、日本語フォントも安定してきれいな表示ができるようになってきましたね。
Noto Serif jp if jp や Noto Sans　はうちもよく使わせていただいてます。
そんなGoogleFontですが、IEで効かない時があることに気づきました。
その解決法を載せておきますね。

一般的な設定ミスの場合

一般的によく見る解決法に「Google Font」のカスタマイズ設定があります。

このカスタマイズ設定の「Languages」で「Japanese」の項目にチェック入れることで表示されるようになるというものです。
この設定をすることで、大抵の場合不具合が可決するのではないかと思います。

Languages設定でも解決しない場合

今回はまったのがこちらです。

<link href="https://fonts.googleapis.com/css?family=Alegreya|Noto+Serif+JP|Vollkorn&display=swap" rel="stylesheet">

このように数種類のフォントを使用したいと思った場合、このようにGoogleがコードを吐き出します。
どうやらアルファベット順にフォントを並べてくれるみたいなのですが、実はIEでは1つの読み込みで1フォントまでしか読み込みを完了してくれないようなのです。
つまり、今回のように数種類フォントを使用したい場合にはIEでは以下のように書きます。

<link href="https://fonts.googleapis.com/css?family=Alegreya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap&subset=japanese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vollkorn&display=swap" rel="stylesheet">

このように個々に読み込んでやることで無事IEでもWEBフォントを使用することが可能になります。