Google日本語フォントがIEで反映されない時に確認する事

Googleフォント、非常に便利ですよね。

特に明朝を使用する際に「さわらび明朝」を使用することがあります。

ただ、IEのサポートがどうもされなくなったようです。

Googleフォント
https://fonts.google.com/

IEでサイトを見ると真っ白になっています。対応していない旨の表示くらいはしてほしいですが・・・。

といっても、IEでGoogleフォントが使えなくなったわけではなさそうです。

今回は「さわらび明朝」を例とします。

GoogleFontsぺージから使用している場合

Googleフォント
https://fonts.google.com/

普通にフォント選んでCSSを読み込めば問題なく使えます。

<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap&subset=japanese" rel="stylesheet">
<p style="font-family: 'Sawarabi Mincho', sans-serif;">さわらびテスト</p>

 

「ググって最初の方に出てくるgithubぺージ」から使用している場合

このページです。私は「さわらび明朝」で3つ目に出てきたので、こっち使ってました。

これがちょっと曲者で、普通に以下の様に設定してもIEでダメでした。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
<p style="font-family: 'Sawarabi Mincho">さわらびテスト</p>

調べたところ、以下のように読み込むスタイルシートに引数を追加してやればIEで反映されました。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&subset=japanese" rel="stylesheet">

最後に「&subset=japanese」を追加しています。

Googleフォントのサイトだとついてますね。あと読み込みのcssがcss2になってる。
こっちは早期アクセス版なので、普通にGoogleフォントぺージの方使いましょうって事ですね・・・。