GoogleフォントのNoto Sans Japaneseを読み込む際、どうしても読み込みに時間がかかってしまい、ウェブレスポンスが悪化し、テキストが一時的に非表示になる現象であるFOIT(flash of invisible text)を引き起こしていました。
今回はこれを多少改善したのでメモしておきます。

下準備

今まで、Noto Sans Japaneseは下記のソースを読み込んでいました。
早期アクセス版です。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

調べてみたら正規版?がリリースされていたようで、まずはこちらに切り替えます。

Noto Sans JP

下記のソースになります。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

なお、font-familyを指定する際は早期アクセス版と違いNoto Sans JapaneseからNoto Sans JPに変更になるので注意が必要です。

body {
 font-family: "Noto Sans JP";
}

さて、ここからが本番です。

システムフォントで一時的にテキスト非表示を回避する

ウェブフォントの読み込み中に非表示のテキストを表示しないようにする最も簡単な方法は、システムフォントを一時的に表示することです。
@font-facefont-display: swap;を利用することでほとんどのモダンブラウザでFOITを回避できます。
Noto Sans Japaneseの早期アクセス版ではこのfont-display: swap;が利用できないので、Googleフォントの正規版に切り替えたわけです。

GoogleフォントでFOITを回避する

使い方は簡単で、GoogleフォントURLの最後に&display=swapパラメータを追加するだけです。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

これで@font-facefont-display: swap;が自動的に付与されます。

@font-face {
 font-family: 'Noto Sans JP';
 font-display: swap;
}

これで一時的にシステムフォントが表示されてFOITを回避でき、Lighthouseの表示速度のポイントも改善しました🎉

お気持ち

Font Awesomeでもこういうのできないのかな。
あと、レガシーブラウザは面倒なので対応しません。

参考

下記ページを参考にしました。

Ensure text remains visible during webfont load
Avoid invisible text during font loading
Google Fonts + 日本語

コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。