webフォントを設定すると、一瞬デフォルトのフォントが表示されてしまう時があります。そんなwebフォントのちらつきをCSSのみでなくす方法をご紹介します。

解決方法

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

解説

visibility: hidden;でまずは非表示にします。
visibilityは、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。
（レイアウトから除去する場合はdisplay:noneを使用する）

webフォントは読み込まれると、htmlタグに「wf-active」のクラスが付与されるので、「wf-active」が付与されたら、visibility: visible;で表示させるというやり方です。

欠点

低速環境だと、読み込みに時間がかかってしまい、真っ白な画面のまま、なかなか表示されない場合もあります。
低速環境を考慮する場合はjsを追加します。

低速環境での解決方法

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

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

解説

読み込み3秒後に「loading-delay」のクラスを付与する。
CSSにて、「loading-delay」を表示させる。
この方法で3秒後に「wf-active」ではなく、「loading-delay」側でサイトが表示されます。

他にもあるよ。関連記事

• HTMLのtableの文字サイズがiphoneだと大きくなる
• 【CSS】placeholderの文字色を変更する方法
• 【CSS】要素の内側に線を引く方法（疑似要素after、outline-offset、box-sizing）