Webフォントの読み込み速度とは?font-displayで表示を速くするコツ

Webフォントの読み込み速度の基本

まずは、Webフォントの読み込みに時間がかかる理由と、その間に画面で何が起きているのかを押さえましょう。

読み込み速度とは何か

ここでいうWebフォントの読み込み速度とは、ブラウザがフォントのファイルをダウンロードして、そのフォントで文字を表示できるようになるまでにかかる時間のことです。

Webフォント(ページ表示時にサーバーからダウンロードして使うフォント)は、ダウンロードが終わるまで、そのフォントで文字を表示できません(Webフォントの仕組みはWebフォントとは?で解説しています)。

しかもブラウザは、HTMLとCSSを読み込み、「このページのこの文字にはこのフォントが必要だ」と判断してから、初めてフォントのファイルを取りに行きます(web.dev「WebFont の読み込みとレンダリングを最適化する」)。

つまり、フォントのダウンロードは、ページの読み込みの中でも後のほうで始まりやすいのです。

そこにファイルの大きさが加わると、文字が表示されるまでの待ち時間が長くなります。

読み込み中に起きる2つの現象

フォントが届くまでの間、ブラウザは「文字を隠して待つ」か「代わりの書体で先に表示する」かのどちらかの動きをします。

前者を「FOIT(フォイト、Flash of Invisible Text:見えない文字のちらつき)」、後者を「FOUT(ファウト、Flash of Unstyled Text:スタイルが当たっていない文字のちらつき)」と呼びます。

Webフォント(ここでは明朝体)が届くまでの表示のイメージ。上が読み込み中、下が読み込み完了後

左のFOITでは、読み込み中は文字の場所が空白のままで、フォントが届いてから文字が現れます。

右のFOUTでは、読み込み中はひとまず代わりの書体(ここではゴシック体)で文字が表示され、フォントが届いた時点で明朝体に切り替わります。

多くのブラウザは、何も指定しないとFOITに近い動きをし、ChromiumベースのブラウザやFirefoxではフォントが届くまで最大3秒ほど文字を隠すと説明されています(web.dev「Best practices for fonts」(英語))。

通信が遅い環境では、この「文字が読めない時間」がそのまま読む人のストレスになります。

一方のFOUTは、文字はすぐ読めるものの、書体が切り替わる瞬間に文字の幅が変わり、レイアウトがずれることがあります。

表示速度と検索での評価

Webフォントの読み込み方は、読む人の使い心地だけでなく、Googleがページの使いやすさを測る指標にも関係します。

Googleは、ページの読み込みの速さや表示の安定性を測る「Core Web Vitals(コアウェブバイタル)」という指標を、検索順位を決める際に考慮する要素の1つとしています(Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」)。

この中には、ページのメインの内容が表示されるまでの時間を測る「LCP」と、表示中にレイアウトがどれだけずれたかを測る「CLS」が含まれています。

• LCP(Largest Contentful Paint):ページを開いてから、画面の中でいちばん大きな画像や文章のかたまり(メインの画像や大きな見出しなど)が表示されるまでの速さ。「表示の速さ」の目安です。
• CLS(Cumulative Layout Shift):ページを見ている途中で、文字やボタンが意図せずガクッと動いた量の合計。「表示のずれにくさ」の目安です。

文字が隠れている時間が長いとLCPが遅れやすく、書体の切り替えで文字の幅が変わるとCLSが悪くなりやすいため、Webフォントの読み込み方はどちらにも影響します。

ただし、これらの指標が良ければ必ず検索順位が上がる、というわけではありません。

まずは読む人にとって快適な表示を目指す、と考えるのがよいでしょう。

読み込み速度を改善する方法

ここからは、Webフォントの表示を速く、安定させるための代表的な方法を紹介します。

「表示のしかたを決める」「読み込む量を減らす」「早めに取りに行く」の3つの方向で考えると整理しやすくなります。

font-displayで表示のしかたを決める

font-displayは、Webフォントが届くまでの間、文字をどう表示するかを指定するCSSの設定です(MDN「font-display」)。

ブラウザは、フォントが届くまでの時間を「文字を隠して待つ期間(ブロック期間)」と「代わりの書体で表示して、届いたら切り替える期間(スワップ期間)」に分けて扱います。

font-displayの値によって、この2つの期間の長さが変わります。

値	読み込み中の動き	向いている場面
auto	ブラウザ任せ(多くの場合blockに近い)	特に指定しない場合
block	短い時間文字を隠し、その後は代わりの書体で表示。届いたらいつでも切り替える	ロゴなど、書体が違うと困る短い文字
swap	ほぼ隠さずに代わりの書体で表示し、届いたらいつでも切り替える	見出しや本文など、すぐ読めることを優先したい文字
fallback	ほぼ隠さずに代わりの書体で表示し、短い時間内に届いたときだけ切り替える	切り替えによるずれを減らしたい本文
optional	ほぼ隠さずに代わりの書体で表示し、すぐに届かなければ切り替えない	表示の速さと安定を最優先したい場合

初心者がまず覚えておきたいのはswapです。

swapにすると、フォントが届くまでの間も代わりの書体で文字が読めるため、「文字が表示されない時間」をほとんどなくせます。

自分でフォントを登録する場合は、@font-face(フォントのファイルをCSSに登録する書き方)の中に次のように書きます。

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-display: swap;
}

Google Fontsを使う場合は、読み込みのURLの最後にdisplay=swapが付いていれば、同じ設定になっています(Google Fontsの使い方はGoogle Fontsとは?で解説しています)。

なお、swapは書体の切り替えでレイアウトがずれやすい面もあるので、ずれが気になる場合はfallbackやoptionalも検討しましょう。

代わりの書体の大きさをWebフォントに近づけて、切り替え時のずれを小さくするsize-adjustという指定もあります(web.dev「Improved font fallbacks」(英語))。

読み込む量を減らす

フォントのファイルが小さくなるほど、ダウンロードは早く終わります。

読み込む量を減らすための基本は、次の3つです。

1. 書体とウェイトの数を絞る
   ウェイト(文字の太さ)は、太さごとに別のファイルになることが多く、1つ増やすごとに読み込む量が増えます。
   本文用と強調用など、本当に使う太さだけにしましょう。
2. WOFF2形式を使う
   WOFF2(ウォフツー)はWeb向けに圧縮効率を高めたフォントの形式で、web.devでは「WOFF2だけを使えばよい」と案内されています(web.dev「Best practices for fonts」(英語))。
3. 必要な文字だけにする(サブセット化)
   フォントから実際に使う文字だけを抜き出すことを「サブセット化」と呼びます。
   特に文字数の多い日本語フォントでは効果が大きく、CSSのunicode-range(このファイルが担当する文字の範囲を指定する設定)を使って、必要な範囲のファイルだけを読み込ませる方法もあります(日本語フォントが重い理由とサブセット化のやり方は日本語Webフォントとは?で解説しています)。

サブセット化のように自分でフォントを加工する場合は、そのフォントのライセンスで加工が許可されているかを、必ず各フォントの規約で確認しましょう(確認のポイントはフォントライセンスとは?で解説しています)。

preloadとpreconnectで早めに取りに行く

先ほど説明したとおり、ブラウザはCSSを読み込んで必要なフォントが分かってから、ようやくフォントを取りに行きます。

この待ち時間を縮めるのが、preload(プリロード)とpreconnect(プリコネクト)という指定です。

preloadは「このファイルは必ず使うので、先にダウンロードしておいて」とブラウザに伝える指定で、HTMLの<head>に次のように書きます。

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

as="font"はフォントであること、typeはファイル形式を表します。

最後のcrossoriginは、自分のサーバーにあるフォントでも付ける必要がある点に注意しましょう(MDN「rel=”preload”」)。

フォントは特別な取得方法(CORSという仕組み)で読み込まれるため、crossoriginが無いと、せっかく先に読み込んだファイルが使われず、二重にダウンロードされてしまいます。CORSは、ブラウザが「このファイルを取ってきて使ってよいか」を確かめるためのセキュリティのルールで、ブラウザはフォントを必ずこのルールに沿った取り方で取得します。crossoriginが無いと先読みだけが普通の取り方になるため、ブラウザは「取り方が違う別のもの」と判断して、フォントを使う段階でもう一度ダウンロードしてしまうのです。

ただし、preloadしたファイルは他のファイルより優先して読み込まれるため、何でも指定すると逆に画像など他の大事なファイルが遅れます。

preloadは、いわば「優先レーン」のようなものです。全部を優先レーンに入れるとレーンが渋滞し、本当に先に届けたいメインの画像やCSSまで後回しになってしまいます。

ページを開いて最初に画面に映る部分(ファーストビュー)の見出しなどで使う、1〜2個の重要なフォントだけに絞りましょう。

一方のpreconnectは、Google Fontsのような外部のサーバーへ、あらかじめ接続だけ済ませておく指定で、Google Fontsの埋め込みコードにもはじめから含まれています。

自分のサーバーに置くか、外部サービスを使うか

以前は、Google Fontsのような外部サービスのフォントは、別のサイトで一度ダウンロードされていればブラウザに保存(キャッシュ)されたものを使い回せるので速い、と言われていました。

しかし現在のChromeでは、Chrome 86から順次導入された「HTTPキャッシュの分割」により、キャッシュはサイトごとに分けて保存されるようになっています(Chrome for Developers「Gaining security and privacy by partitioning the cache」(英語))。

つまり、別のサイトで同じフォントが読み込まれていても、自分のサイトでは改めてダウンロードが必要になります。「たくさんのサイトで使われているGoogle Fontsだから、自分のサイトでも速いはず」というのは、今では当てはまらないと考えておきましょう。

そのため、フォントのファイルを自分のサーバーに置いて配信する「セルフホスティング」も選択肢になります。

方法	良い点	気をつける点
外部のフォントサービスを使う	コードを貼るだけで使え、日本語フォントの分割配信なども任せられる	外部のサーバーへの接続が増える。細かい読み込み方は調整しにくい
自分のサーバーに置く(セルフホスティング)	preloadやキャッシュの設定など、読み込み方を自分で調整できる	ファイルの用意やサブセット化を自分で行う必要がある。ライセンスで自分のサーバーへの設置が認められているか確認が必要

どちらが速いかはサイトの作りやサーバーの性能によって変わるので、実際に測って比べるのが確実です。

Lighthouseで効果を確かめる

読み込み方を変えたら、本当に速くなったかを確かめましょう。

Googleが無料で提供している「Lighthouse(ライトハウス)」を使うと、ページの表示速度を点数で確認でき、Webフォントの読み込み中に文字が見えない時間があるといった問題も指摘してくれます。

使い方はGoogle Lighthouseとは?で解説しています。

あわせて、ブラウザの開発者ツールの「ネットワーク」タブで種類を「フォント」に絞り込むと、どのフォントファイルを、どのくらいの大きさで読み込んでいるかを一覧で確認できます。

実践のポイント

Webフォントの読み込み速度を改善するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目にこだわって、書体やウェイトをいくつも読み込んでしまうことがあります。
  1つ1つは小さく見えても、合計するとページ全体が重くなるので、使っているかどうかを定期的に見直しましょう。
• 重要そうに見えるフォントを、すべてpreloadしてしまうことがあります。
  preloadは優先順位を上げる指定なので、増やしすぎると他のファイルの読み込みを邪魔します。
• preloadにcrossoriginを付け忘れ、同じフォントを二重にダウンロードしてしまうことがあります。
  開発者ツールのネットワークタブで、同じフォントファイルが2回読み込まれていないか確認しましょう。
• Google Fontsなどの外部サービスが表示速度の足かせになっていることに気づかないまま運用してしまうことがあります。
  時々Lighthouseで計測し、フォントの読み込みが指摘されていないかをチェックしましょう。

よくある質問

• Q. font-displayは結局どれを選べばいい?
  A. 迷ったら、まずはswapで十分です。
  文字がすぐ読めるようになり、最も大きな不満である「文字が表示されない時間」をなくせます。
  書体の切り替わりによるずれが気になる場合は、fallbackやoptionalを試してみましょう。
• Q. Webフォントを使わないのが一番速い?
  A. 読み込み速度だけを考えれば、端末にもともと入っているフォントだけを使うのが最も速い方法です。
  ただ、ブランドの印象を出したい場合などはWebフォントが役立つので、見出しだけに使うなど、効果の大きい場所に絞って取り入れるのがおすすめです。
• Q. どのくらい速くなったかは、どうやって確かめる?
  A. 変更の前と後でLighthouseを実行し、点数や指摘内容を比べるのが手軽です。
  1回の計測では結果がぶれることもあるので、何回か測って傾向を見ましょう。

まとめ

Webフォントの読み込み速度とは、フォントのファイルを受け取り、そのフォントで文字を表示できるまでの時間のことで、遅いと文字が見えない時間や、書体の切り替わりによるずれが起こります。

font-display: swapで先に代わりの書体を表示し、書体とウェイトを絞ってWOFF2やサブセット化で軽くし、重要なフォントだけpreloadするのが改善の基本です。

まずは自分のサイトでLighthouseを実行し、フォントの読み込みについて指摘がないか、開発者ツールで読み込んでいるフォントの数と大きさを確かめるところから始めてみましょう。