Webフォント最適化

デバイスフォントで使用するフォント

デバイスフォントは環境によってフォントが変わるが、iOSを基準にヒラギノ角ゴで設定しておくか、Windowsを基準に游ゴシックで設定しておくことが多い。

WindowsiOSWindows / iOSandroid
ゴシック系メイリオヒラギノ角ゴ游ゴシック–
明朝系MS明朝ヒラギノ明朝游明朝–
標準搭載されているフォント

※android端末の場合
androidの場合、上記で挙げたどのフォントも標準搭載されていない。そのため、android端末では基本的に「デザイン通りのフォントにはならない」と認識しておくこと。
また、android端末には明朝系のフォントが一つも入っていないため、cssで明朝系を指定していてもゴシックで表示されてしまう。

FOITとFOUT

Webフォントを使用すると、フォントデータの読み込みに時間が掛かる。その間のテキストの扱いは、大まかに以下の2つの選択肢が考えられる。

  1. フォントデータが読み込まれるまで、テキストを描画しない
  2. フォントデータが読み込まれるまでは、デバイスにインストールされている既定のフォント（フォールバックフォント）で表示する

1の場合、フォントデータの読み込みに時間がかかると、テキストがずっと表示されない状態になる。この問題を FOIT（Flash of Invisible Text）という。
2の場合、テキストは表示されるが、フォントデータが読み込み完了した時にフォントが入れ替わるため、テキスト表示のチラつきや、ページレイアウトのガタつき（レイアウトシフト）が生じてしまう。この問題を FOUT（Flash of Unstyled Text）という。

レイアウトシフトは、Googleが提唱するCore Web Vitals（サイトの健全性を示す重要指標）の1つである CLS（Cumulative Layout Shift）スコアにも影響する。

font-display

CSSの @font-face ルールの中に、font-displayという記述子がある。このプロパティではフォントデータの読み込みが完了するまでの間、どのようにテキストを表示するかを定義する。
font-display には、以下の仕組みがある。

  • ブロック期：フォントデータ読み込み完了までテキストを描画しない
  • スワップ期：フォントデータ読み込み完了まではフォールバックフォントで表示する
  • 読み込み失敗期：フォント読み込みに失敗したとみなし、フォールバックフォントで表示する

まずブロック期から始まり、その間にフォントの読み込みが完了しなければスワップ期に移行し、それでも読み込みが完了しなければ読み込み失敗期という順番となる。
これにより、フォントデータの読み込み時間に応じて表示を制御することができる。
十分に短い場合は font-display: block でブロック期を設けて FOUT を抑える、読み込み時間が長い可能性がある場合は font-display: swap でスワップ期を設けて FOIT を抑えるというように指定する。

また、表示するコンテンツの性質も考慮するとより効果的である。
例えば、本文やブログといった、FOIT リスクが高い要素やコンテンツは、font-display: swap で読み込み中でもテキストが表示されるのがよい。
逆に、アイコンフォントといったそのフォントである必要があるもの、ヒーローイメージ、ランディングページといったブランドイメージが大事な要素やコンテンツは font-display: block でブロック期を設けて FOIT を抑えるのがよい。

Webフォントのファイル形式

Webフォントに使用されるファイル形式は、以下の5種類ある。

ttf (TrueType)一般的なフォント形式。Windows-Mac間での互換性がない
otf (Open Type Font)ttfと比べ、文字数が多く、多機能なフォント形式。Windows-Mac間での互換性あり
woff (Web Open Font Format)Webフォント用に開発されたフォント形式。otfやttfを圧縮して作成している。
eot (Embedded Open Type)IEでの表示用に使用するファイル形式
svg (Scalable Vector Graphics Font)SVGを利用したフォント形式

現在ではほとんどのケースで WOFF または WOFF2 フォーマットを使用している。
WOFF / WOFF2 の主な違いは圧縮アルゴリズムで、WOFF2 のほうが圧縮率が高いとされている。２つのフォーマット間には互換性がないため、WOFF2 を WOFF として、もしくは WOFF を WOFF2 として読み込むことはできない。
@font-face で指定する際は、以下のように format 構文で形式を指定する。

@font-face {
  font-family: 'Font Name';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/FontName.woff) format('woff');
  font-display: swap;
}

.font-fontName {
  font-family:'Font Name';
}

WOFF・WOFF2 ファイルは OTF や TTF ファイルから変換することができる。
ただし、ファイル形式の変換はフォントファイルの改変にあたるため、多くのフォントメーカーは通常、これを認めていない。このような処理を行う際には、フォントのライセンス・権利関係をクリアにしておく必要がある。

日本語Webフォントのサブセット化

日本語Webフォントデータは、ひらがな・カタカナ・漢字など文字の種類が極端に多いためファイルサイズが多いことがデメリットだが、その膨大なデータの中には日常生活でほぼ使用しない漢字なども多く含まれている。
そのため、日本語Webフォントを使用する際は、普通は使わないと思われる文字を除いて軽量化（サブセット化）するのが一般的である。

または、見出しなどの部分的なパーツにしかWebフォントを使用していない場合は、サイト内で使用している文字だけに絞って軽量化（サブセット化）するという手もある。
ただし、あとでサイトを更新して新しい文字が出てくるとそこだけ違うフォントが当たってしまうという事態が起きるため、日本語Webフォントをあてたい文字が今後も頻繁に更新される場合にはおすすめできない。

サブセット化の大まかな流れは以下の通り。

  1. サブセット化したい日本語フォントを用意する
  2. 第一水準や人名漢字など入れたい文字を定義しておく
  3. サブセットフォントメーカーでフォントファイル作成
  4. WOFFコンバータでwoff版作成
  5. CSSで@font-faceの指定

Web フォント配信サービスでは、利用しているページを解析し、動的にサブセット化を行い配信する「ダイナミックサブセッティング」を行っているものが多くある。

なお、フォントのサブセット化もフォントファイルの改変にあたるため、多くのフォントメーカーは通常、これを認めていない。このような処理を行う際には、フォントのライセンス・権利関係をクリアにしておく必要がある。

【参考】
https://baigie.me/engineerblog/notosanscjkjp-subset/

プリコネクトとプリロード

フォントファイルが外部にある場合は、プリコネクトをheadに記述し、外部サーバーとの接続確立を高速化する。

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

または、プリロードをheadに記述し、フォントファイル読み取りの優先順位を上げる手法もある。

<link rel="preload" as="font" href="/path/to/font.woff">
inserted by FC2 system