Webフォントによるちらつきをなくす方法（ネット低速環境も考慮）

2022/07/26追記

Loading画面を使用したい場合はこちら！！

はじめに

AdobeやGoogleが用意しているWebフォント、本当に便利ですよね。
スタイリッシュなフォントを、CSSやJavascriptの数行を追加するのみで使用できる優れものです。
ですが欠点として、Webフォントを読み込みブラウザに反映させるのに若干ラグがあるために、文字幅の変更が発生することから、
サイトが一瞬ちらついて表示されているように見えます。
これには「Flash Of Unstyled Text (FOUT)」という名前も付いているようです。
具体例：https://helpx.adobe.com/jp/typekit/using/font-events.html
このちらつきをなんとかする方法ですが、すごく参考になるサイトがあって、
Webフォントの読み込み完了後、htmlタグに.wf-activeというclassが挿入されることから、
以下のようなcssを紹介されております。

html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

通常のhtmlタグにはvisibility: hidden;のスタイルを追加しておいて、
Webフォントの読み込みが完了したら付加されるクラスwf-activeによって、visibility: visible;が反映させるという流れ。
非常に分かりやすくて活用しやすいのですが、一点欠点があって、
それは低速環境だと画面がいつまでも表示されないこと。
電車の中のスマホ、帯域制限・・・色んな理由がありますが、いつまでも真っ白な画面となるサイトを作るのは考えものです。
その現象の改善方法を記載します。

方針

(1)基本的には、Webフォントの読み込みが完了したら画面表示を行う
(2)ただし低速環境を考慮して、一定時間経過したら強制的に画面表示を行うようにする（Webフォント読み込み完了かは問わない）

コード

以下のcssとjavascriptを追加してください。

css

html {
  visibility: hidden;
}
html.wf-active, html.loading-delay {
  visibility: visible;
}

javascript

※headタグ閉じの直前に記載すること

setTimeout(function () {
    document.getElementsByTagName("html")[0].classList.add("loading-delay");
}, 3000);

解説すると、読み込み開始3秒後にhtmlタグに"loading-delay"クラスを追加します。
cssによって、Webフォント読み込み完了後に付加されるwf-activeクラス、もしくは3秒後に付加されるloading-delayクラスによって、htmlはvisibleになるという流れです。
例の場合は3秒後に強制表示を行っています。時間を前後させたい場合は、javascript3行目の「3000」を変更するといいです。