GoogleフォントをIEで使う

Googleフォント、日本語フォントにも対応してますます便利になりました。

しかしそれと同時期にIE（Edgeも）非対応になっています。Qiitaでも言及しているひとがいました。
https://qiita.com/umeume66/items/e8982e90c02cfe2f4be4

対処法は自前でフォントをダウンロードして eot に変換するなどさまざまあります。

が、自分は Typekit の Web Font Loader を使うのがもっとも手軽と考え、その方法を採ることにしました。

Web Font Loaderの導入

もっとも簡単な導入方法はHTMLのbodyタグの末尾に以下を貼り付けることです。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Noto Sans', 'Noto Serif']
    }
  });
</script>

いちおう解説すると、１行目のscriptタグで Web Font Loader 本体を読み込み、２行目で Google フォントから "Noto Sans" と "Noto Serif" の2フォントを読み込んでいます。

パフォーマンス向上

しかし、上の書き方ではレンダリングをブロックしてしまいます。

よって、最初はフォールバック先のフォントで表示しておいて、遅れて Googleフォントを適用させる（いわゆる Lazy loading）のが望ましいでしょう。

そのためにはasync属性をつけるなりして、非同期で webfont.js をロード後、続くコードを実行するなりが推奨されます。このあたりはお気に入りのものを使用してください。公式サイトにも document.write を使った例があります。

Web Font Loader は Google フォント以外にも font.com やローカルにホストした Web フォントなどにも対応しており、この用途だけでは少し余分かもしれません。CDNで配信しているとはいえ、フットプリントをどうしても軽くしたいのであれば別の手段を探すのがよいでしょう（ただ、その要求下で eot ファイルをCDNでなく自前配信することは考えにくいと思います）。