Webフォントの読み込み問題、ちらつき、パフォーマンス改善

Webフォントが一般化してきて、Font AwesomeやGoogleフォント、モリサワWebフォントなど導入しやすくなりました。

でも日本語フォントやサイズが大きいフォントは、Webフォントのダウンロードが終わるまでレンダリングが保留されたり（FOIT）、ダウンロードが完了するまでシステムフォントで代用されて表示される（FOUT）などの問題があります。

Google PageSpeedInsightでも警告が表示されます。

ウェブフォント読み込み中のテキストの表示

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

Controlling Font Performance with font-display
https://developers.google.com/web/updates/2016/02/font-display?utm_source=lighthouse&utm_medium=unknown

＠font-face で font-displayプロパティを指定する

まずはGoogleフォント（Arvo）とFont Awesome（バージョン5）の@font-faceの記述例。

Googleフォントの場合：

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Font Awesomeの場合

@font-face {
　font-family: 'Font Awesome 5 Free';
　font-style: normal;
  font-weight: 900;
　src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
     url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

@font-faceルールには最低でもfont-familyとsrcの設定が必要です。

src:にはWebフォントの場所を指定します。

src: local('Arvo'), 
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) 
format('woff2');

src: local(),
url()

local()はローカルに該当フォントがインストールされている場合はローカルのフォントを優先するように設定できます。

なので、url()よりもlocal()を先に指定します。
src:には読み込むフォントのフォーマットの指定ができます。
format( )は必須ではないので指定しなくてもOK

FontAwesome5は（無料版）font-weightを指定しないと正しく表示ないので注意。

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

link要素で先読みの指定をする

@font-faceの指定以外に、link要素にpreload指定をすることでWebフォントのレンダリングの高速化が期待できます。

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

preloadはフォントだけでなく、image,picture,embedなどにも対応していて、先読みさせたい画像などを指定することができます。

as="image"
as="picture"