ウェブフォント表示方法比較

前回、ウェブフォントの表示方法で記事の題名に反してGoogle Fontsを使う場合をあまり考慮していなかったのでもう一度。

  1. ウェブフォントを読まない場合
  2. Google Fonts推奨の方法
  3. Google Fonts推奨の方法でCSSをPreloadで非同期読み込み
  4. サーバにウェブフォントを置いて普通にCSSで指定
  5. サーバにウェブフォントを置いてCSSで遅延指定で読み込み
  6. Google FontsのCSSを改変して遅延指定で読み込み
  7. Google FontsのCSSを改変して遅延指定で読み込み＋CSSをPreloadで非同期読み込み

この7つの場合をPageSpeed Insightsで計測して比較してみた。
せっかくなのでそれぞれサンプルページを悪いインターネットに作った。

6,7番用に改変したCSSは以下2つ。

Noto Sans JP (ゴシック)
Noto Serif JP (明朝)

サンプルの目次ページにも書いたが結論として5番と6番が正解っぽい。
特にGoogle FontsのNoto系フォントを使うなら6番の方法はChromeでの文字入れ待ちが解消するので良さそう。
絶対NGなのは3番と7番、あまりオススメできないのは2番と4番。