Google Fontsを非同期で読み込む

Google Fontsをlinkタグで読み込んでいたところ、Lighthouseで「レンダリングブロックしてるぞ」と怒られてしまったので非同期で読み込む形に変更しました。
これにより読み込み速度の改善も見込めます。

今回はGoogleAdobe Fonts(旧Adobe Typekit)が共同で開発したWeb Font Loaderを使用します。

以下に当ブログのコードを記載しますので必要な箇所を変更してHTML 上で読み込んでください。


familiesに配列でフォント名とウェイトを指定します。
そしてsessionStorage.fonts = true;を追加することでブラウザを閉じるまでブラウザにフォントをキャッシュします。

その他にもコールバックイベントやサブセットパラメータなどありますので気になる方はWeb Font Loaderのドキュメントを読んでみてください。