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;は指定しましょう。

Google Fonts（Webフォント）を使用するときのポイント

デザインとユーザー体験を両立するため、細かい点に気を配りましょう。例を挙げておきます。

• 必要最低限のWebフォントのみ使うようにする
• ページ全体や本文などはWebフォントを使用せず、見出しやポイント的な部分など最低限に留める
• デザインに合わせ、必要なウェイトのみ読み込ませる（Regular、Boldのみにするなど）
• 読み込み時間や通信容量削減のため、日本語Webフォントの多用は避ける（日本語フォントはファイルサイズが大きい）
• Webフォントが読み込まれない状態でも情報の欠落やレイアウト崩れが起きないようデバイスフォントの状態でキチンと検証する

以上、Google Fontsではデザインのクオリティの向上と、ユーザー体験を円滑にするための様々な施しがなされています。良いGoogle Fontsライフを！

おしまい♥