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



1. Webフォントの『ちらつき』の原因
Adobeフォントやgoogleフォントなどの『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フォントのちらつきを防止した実装サンプルページ
さいごに


関連記事
おすすめ
かんれん
- web / 2019.6.18
- 【CSS】背景(background)を2色にする
- web / 2018.9.3
- 【CSS】セレクタまとめ、最初・最後・奇数・偶数・何番目
- web / 2019.5.30
- 【CSS】ホバー(マウスオーバー)実装サンプル集(画像の明度を上げる編)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.03.24New
- JANAI COFFEE
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.02.23
- 【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
- 文章の回り込みって丸くできないですかー? あー、円形に回り込みですねー、できますよ…
- 125naroom / デザインするところ(会社)です。