Webフォントのちらつきを改善したい

はじめに

自分のアプリのフォントに、Google FontsさんのWebフォントを使用させてもらいました。
しかしWebフォントがダウンロードされて表示されるまでに、フォールバックのフォントが表示されることによるちらつき(FOUT)がはっきり確認できるレベルになっておりましたので、改善したいと思います。

今回使用予定のWebフォント

1. Noto Sans JP
2. kameron

実行環境

1. React
2. TailwindCSS

Noto Sans JPのFOUTを改善

まずは日本語フォントであるNoto Sans JPのFOUTを改善していくことにします。

今回はNorth Detailさんのブログを参考に行っていきます。

1. Noto Sans JPをダウンロード
2. ファイルフォーマットの変更
3. サブセット化
4. TailwindCSSからファイルを読み込む

Noto Sans JPのダウンロード

Noto Sans JPのページにアクセスし、ダウンロードをする。
ダウンロードすると拡張子がotfファイルのフォントファイルをGETできました。

ファイルフォーマットの変更

2021年5月現在、Web Open Font Format 2.0（woff2）がWebフォント用の最小かつ最も効率的なファイルフォーマットです。

colissさんより引用

どうやら拡張子はwoff2がよさそうです。
ただしIE11には対応してないので注意です。

下記サイトからotf→woff2に変換しました
OTF to WOFF2 Converter

サブセット化

サブセット化というのは不必要な文字はフォントファイルから削除するというもので、ファイルサイズが小さくなるので行っていきます。

サブセットフォントメーカー

上記のアプリを使用して必要な文字を追加していきます。
必要な文字はJIS第一水準、JIS第二水準を参考に追加していきました。

ここまでの作業でダウンロードしてきた際にはファイルサイズが4000kb以上あったサイズが650kbまで小さくなりました。

TailwindCSSから読み込む

app.css

@font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP")
        url("../src/components/utils/fonts/NotoSansJP-Thin.woff2");
}

以上でNoto Sans JPのFOUTを改善することが出来ました。

kameronのFOUTを改善

続いてkameronフォントのFOUTを改善します。
こちらの問題に関してはWebフォントではなくWebセーフフォントを使用することにしました。

Webセーフなフォントとは？
異体字も含めるとインターネット上には650,000種類以上のフォントが存在します。その中でも、大半のWebブラウザとOSが対応しているフォントはWebセーフとみなされています。フォントファイルがOSに含まれているため、サイト訪問者はサーバーからフォントをダウンロードする必要がありません。

KINSTAさんのブログより引用

上記を参考にしてkameronに近いGeorgiaを使用しました。

おわりに

以上でアプリのFOUTが認識できなくなりました。
ちなみにLighthouseのPerformance値が20近く上昇していて、
パフォーマンスが良くなり、ちらつきも改善したのでめでたしめでたし。
何か誤っていることやより良い改善策があれば是非コメントしていただけるとありがたいです。

参考

https://coliss.com/articles/build-websites/operation/work/optimizing-the-display-of-web-fonts.html
https://www.northdetail.co.jp/blog/1324/
https://kinsta.com/jp/blog/web-safe-fonts/