HTML&CSS

WEBフォントの表示スピードを改善する！（ちらつき改善）

WEBフォントが表示される前に、一瞬違うフォントが表示されてしまう。。。

ちらつきが気になりますよね。ＷＥＢフォントを読み込む表示スピードを改善しましょう！

 Webフォントが表示される前になぜ他のフォントが表示されてしまうかというと、ＷＥＢフォントの読み込みに時間がかかるので、タイムラグができてしまうのです。

チラつきをなくす方法については「読み込みが完了するまで全体を非表示にさせる」という処理をします。
ＣＳＳのみで簡単にできます！

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

これだけでちらつきがなくなります。

私が使う時は大体これだけでちらつきがなくなりますが、インターネット接続環境が悪い場合はいつまで経っても表示されない場合があるみたいなのでその場合は、JavaScriptを使って何秒後かに表示させる。という設定があります。

遅くても 3 秒後にはページの内容が表示されるという設定です。（Adobe Fonts の Web フォント用スクリプトは、 scriptTimeout の値が、 3000 をデフォルトとしているので、参考に指定しています。）

setTimeout(function() {
    if (document.getElementsByTagName("html")[0].classList.contains('wf-active') != true) {
        document.getElementsByTagName("html")[0].classList.add('loading-delay');
    }
}, 3000);

その場合のＣＳＳはこちらになります。

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

-HTML&CSS