零弐壱蜂

[Google Fonts] 読み込みのパフォーマンスを向上させる方法

2 min read

display=swap

Google Fonts が提供するタグがdisplay=swapをサポートし、デフォルトでこのパラメーターが付与されるようになった。

https://fonts.googleapis.com/css?family=Roboto&display=swap

このパラメーターがあると@font-faceにfont-display: swap;が適応された状態の CSS が配信されるようになる。
FOIT 状態が続くこともなくなり、webfontloaderなどの遅延読み込みライブラリを利用しなくて良くなった。

font-display

font-display 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display

  • font-display: auto;
    デフォルトでブラウザの挙動に準拠する
  • font-display: swap;
    フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画される

読み込みスクリプト

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

<link
  rel="preload"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
  as="style"
/>

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
  media="print"
  onload="this.media='all'"
/>

1. preconnect

Google Fonts の CSS はfonts.googleapis.comにホスティングされているが、フォントファイル自体はfonts.gstatic.comされている。そのため、preconnect の指定を入れる場合は下記のようにする必要がある。

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

2. preload

preloadを利用する。ただ、preload は IE と Firefox（現時点）で使えないため（参考：https://caniuse.com/#feat=link-rel-preload）、`preload`の記述に加えてハックが下記のような記述で必要になる。

<link
  rel="preload"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
  as="style"
/>

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
  media="print"
  onload="this.media='all'"
/>

ハック

  1. CSS をmedia="print"で印刷用スタイルとして記述する。ブラウザは印刷用スタイルシートを非同期にダウンロードする
  2. 読み込みが完了したらmedia属性を変更して CSS を読み込ませる

参考

Edit on GitHub