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

一瞬だけ別のフォントが表示されるのですがー

ちらつきをなくす方法を紹介しますねー

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

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

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

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

このサイトは一瞬だけ『ちらつき』ます。

デフォルトのフォントを似たタイプにしてるので、個人的には『あり』かなと思う今日この頃です。

CSSだけで対応する

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

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

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

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

JavaScriptも使って対応する

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

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

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

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

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

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

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

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

さいごに

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

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

関連記事