Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@hirossyi73

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

はじめに

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」を変更するといいです。

41
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
41
Help us understand the problem. What is going on with this article?