Google Fontsを非同期で読み込む

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

今回はGoogleとAdobe Fonts（旧Adobe Typekit）が共同で開発したWeb Font Loaderを使用します。

以下に当ブログのコードを記載しますので必要な箇所を変更してHTML 上で読み込んでください。 familiesに配列でフォント名とウェイトを指定しています。

loading...

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