Googleフォントの「ウェブフォント読み込み中のテキストの表示」の解決方法

この記事は約3分で読めます。

Googleフォント「ウェブフォント読み込み中のテキストの表示」の解決方法
PageSpeed Insightsの分析結果の項目の1つ
ウェブフォント読み込み中のテキストの表示
Googleフォントだけが解決できないと悩んでおりましたが、解決することができたので、解説していきます。

結論

&display=swap
をGoogleフォントのクエリパラメータに追加するだけです。

<link rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" />

このように&display=swapを追加するだけでウェブフォント読み込み中のテキストの表示を解決できます。

解決方法

STEP1

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet"/>

あるホームページのGoogleフォントのソースコードです。
PageSpeed Insights
ウェブフォント読み込み中のテキストの表示が引っかかっており、遅延を起こしております。
こちらを修正していきます。

STEP2

&display=swapを付け加えます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&display=swap" rel="stylesheet"/>

PageSpeed Insights
結果、ウェブフォント読み込み中のテキストの表示が解消され、少しばかりですが、遅延が減りました。
※他の遅延項目が残っておりますが、触れないで頂けると助かります。

余談

ブログを書いてて気づいたのですが、最近のGoogleフォントでは&display=swapがついているようですね。
長年、サイト運営をされている方は改めて入れ直すだけでも良いかもしれません。