Google Fontsを使うとき提供されるlink要素コードはどんな意味があるのだろう？

2023/10/10 (火) - 00:00　CSS

Google Fonts使ってますか？無料で使いやすく便利ですよね。このブログを作るとき、久々にGoogle Fontsを使ったら出力されるコードが前より増えていたので、一体何の意味があるのか、しらべてみました。

2023年現在、以下のようなコードが出力されます。

<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:wght@400;700&display=swap" rel="stylesheet">

まずlink要素のrel="preconnect"属性を指定しているタグでは、「このドメインに接続するよ〜」ということをブラウザへ事前に覚えさせる働きをします。これを指定することでこのドメインのリソースを先読みするようになり、高速化の改善が期待できます。

そのうえで先読みしているリソースの中身を見ると…

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

fonts.googleapis.comではWebフォントを読み出すAPIのドメインになります。

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

fonts.gstatic.comでは、Webフォントのファイルを読み出すドメインを指定しています。なお、こちらではcrossorigin属性が付与されています。これはCORSといいクロスドメイン設定で別ドメインから読み込んだフォントや画像などを、Webサイト内のリソースとして利用する際に指定します。

JavaScriptのCDNなどでも同じようにcrossorigin属性が与えられていることが多いです。なお、このドメインから読み込む実際のファイルは…

https://fonts.gstatic.com/s/notosans/****

といった具合に、APIで指定されたWebフォントファイル（font/woff2）を実際に読み込み、Webサイト内で表示させています。

<link href="https://fonts.googleapis.com/css2?family=****:wght@***;****;****&display=swap" rel="stylesheet">

そして、最後に実際のCSSを指定します。familyのパラメータでフォント名（Noto Sans等）を指定し、wght@でフォントのウェイト（400、700等）を指定します。

最後にdisplay=swapのパラメータを指定します。これはデフォルトで付加され、Webページ内で扱うWebフォントを指定した箇所にfont-display: swap;プロパティを付加します。これを指定することでWebフォントが読み込まれるまではデバイスに入っているフォントを先に表示し、Webフォントが読み込まれたタイミングでWebフォントに表示が切り替わります。

通常はWebフォントが読み込まれるまでテキストが一切表示されず、Webフォントが読み込まれたタイミングでようやくテキストが表示されます。その間は何も表示されないため、アクセスしたユーザーにとっては不快感を与える可能性があります。

例えばユーザーのネット環境が遅かったり、Webフォントがあるサーバーが遅かったりすると、待ち時間でイライラしたユーザーがアクセスをやめ離脱してしまったり、Webサイトへの印象が低下するなど、機会損失になりかねません。必ずfont-display: swap;は指定しましょう。