【CSS】Webフォントのちらつきをなくす方法

Webフォントを使ってるのですが、一瞬だけ別のフォントが表示されるのですがー

あー、気になりますよねー、ちらつきをなくす方法を紹介しますねー

1. Webフォントの『ちらつき』の原因

Adobeフォントやgoogleフォントなどの『Webフォント』を使うと、サイトを開いた時に一瞬だけ別のフォント（デフォルトのフォント）が表示されます。

『ちらつき』の原因はこれですね。

Webフォントを読み込むのに少し時間がかかるので、タイムラグができるのです。仕方がないといえば仕方がないですね。

Webフォントのちらつき実装サンプルページ

でもどうしても気になる場合は、CSSやJavaScriptを使って時間をかせぐ方法があります。ただ少しだけ表示速度が下がる、という感覚になります。ローディングを使っているサイトも多数ありますが、毎回ローディングを見るのはちょっと飽きちゃいますよね。

どうしたものか。

ちなみにこのサイトは一瞬だけ『ちらつき』ます。
デフォルトのフォントを似たタイプにしてるので、個人的には『あり』かなと思う今日この頃です。

2. CSSだけで対応する

CSS

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

これだけです。
Webフォントの読み込みが完了すると『wf-active』というクラスが付与されます。なので、まずはhtmlを『hidden』で非表示にして、読み込みが完了後に『visible』で表示します。

とても簡単な仕組みなのですが欠点があります。
インターネットの接続環境が悪い場合だとサイトが表示されるまで少しだけタイムラグができるのです。
困ったもんです。

結局、Webフォントの読み込みが完了するまで待つということになります。ただ『ちらつき』はなくなるのでご安心を！

CSSだけでWebフォントのちらつきを防止した実装サンプルページ

3. JavaScriptも使って対応する

CSSだけだとインターネット接続環境が悪い場合はいつまで経っても表示されない場合があります。
そんなときは、JavaScriptを使って何秒後かには絶対に表示させる。という設定が必要になります。

JavaScript

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

この場合は、3秒後には絶対に表示させるよ！（Webフォントが読み込まれてなくても！）という設定です。
正確には、3秒後に『html』に『wfno-load』というクラスを付与する！ですね。

なので、CSSにも追記が必要になります。

CSS

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

ただ、やっぱりインターネットの接続環境が悪い場合だとサイト表示速度は下がる。といった感覚になります。

CSSとJSでWebフォントのちらつきを防止した実装サンプルページ

4. ローディング（アニメーション）で良き感覚にする

と、いうことで行きつくところは『ローディング』を使う。になりますね。
毎回ローディングを見るのはちょっと飽きちゃうので毎回見たくなるようなアニメーションがあると良きですね。

ローディングでWebフォントのちらつきを防止した実装サンプルページ

さいごに

おー、『ちらつき』消えたー

なにごとも工夫が必要ですねー

関連記事

【jQuery】 ローディング、実装サンプル集