これまで「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" >

実際には「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" >

スタイルシートの読み込み設定に media="print" と