これまで「Google Fonts」の読み込みには『Web Font Loader』を使うことが多かったのですが、少々面倒で使用するハードルが高いんですよね。
今日紹介するのは、比較的簡単に、秒速で実装できるGoogle Fontsの遅延読み込みのテクニックです。

［Google Fonts］を遅延読み込みする

通常Google Fontsのウェブサイトで提示されるコードは次のようなものになります。
この例では『Noto Sans Japanese』を読み込んでいます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

このままでは遅延読み込みされず、「PageSpeed Insights」などのWEB診断テストでは必ず『レンダリングを妨げるリソース』であるとして警告を受けます。

このコードを次のように書き換えます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" as="style" fetchpriority="high">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" media="print" onload='this.media="all"'>

実際には「https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap」の箇所はご自身が読み込みたい Google Fonts の設定で上書きしてください。

解説

「preconnect」の指定

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

ブラウザにGoogle Fontsのサーバーおよびフォントファイルをホストしているサーバーに対する接続を事前に開始するよう指示をしています。
これはデフォルトの設定のまま。変更はありません。

フォントの事前読み込み

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP" as="style" fetchpriority="high">

link rel="preload"によって Google Fonts のスタイルシートを事前に読み込んでいます。
このとき、fetchpriority="high" を指定することで、より優先的にスタイルシートを読み込んでいます。

「fetchpriority」属性はリソースの読み込みをどのように優先させるかを示す属性です。
使用可能な値は「high」「low」「auto」の３つ。
「high」を指定することで、他の同じ種類のリソースと比較して、高い優先度で事前読み込みを行います。

フォントの読み込み完了時にウェブページに適応させる

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP" media="print" onload='this.media="all"'>

スタイルシートの読み込み設定に media="print" と onload='this.media="all" を追加しています。

これらの意図は次のとおり。

  1. 初期値に「media=”print”」を指定しておくことで、印刷用のCSSとすることでブラウザを騙し、レンダリングと関係なくスタイルシートを読み込ませる。
  2. フォントの読み込みが完了したときに「onloadイベントによって「media=”print”」だったものを「media=”all”」に書き換える。

「Web Font Loader」か「preconnect & preload」か？

「Web Font Loader」か「preconnect & preload」のどちらを使用するかは、プロジェクトの要件やパフォーマンスに依存します。

Web Font Loader
非同期的にフォントを読み込むため、ページのレンダリングブロックを防げる。
高度な制御が可能で、読み込み後のイベント処理やフォールバックの設定が簡単。カスタマイズが求められる場合に最適。
preconnect & preload
複雑な設定が不要。簡単で軽量、基本的なパフォーマンス改善に適している。

もし高度なフォント制御が必要でない場合、今回紹介した「preconnect & preload」による事前読み込みを実装するほうが相応しいでしょう。
一方、フォント読み込み管理や最適化が重要であれば Web Font Loader の使用を検討してみてください。