Webフォントのガタツキを解消する方法

・Webフォントはどの環境でも同一の表示ができて便利。その一方で、ロード時にガタツク、チラツクという欠点がある。

・なんと！これを解消する正式な方法がある。
　このチラつきはFOUT（Flash Of Unstyled Text）と呼ばれている。

・FOUTを回避するために「Web Font Loader」というものを使う。

・これは、WEBフォントをロードした後にhtml要素にあるクラスを付与するから、それをもとに初期表示をしてね。というものである。

使い方

・以下のコードを追加する。
　・CSS：webフォントがロードされたら、wf-activeクラスが付与されるので、「html.wf-active」のスタイルが有効になる。つまりここで表示する。

　・js：WEBフォントをロードするスクリプト。

　・js：3秒以内にWEBフォント取得できなかったら、一応WEBフォント使わず表示するという補助処理。「html.loading-delay」のスタイルを有効にするもの。

・familiesに、ロードしたいフォント名称を入れる。複数ロードしたい時はカンマ区切りで。

<style>
html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}
</style>

<script>
    window.WebFontConfig = {
        google: {
            families: ['RocknRoll+One']
        },
        active: function() {
            sessionStorage.fonts = true;
        }
    };

    (function() {
        var wf = document.createElement('script');
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

<script>
    // 3秒たってもウェブフォント取得できない時は、使えるフォントで表示する。
    setTimeout(function() {
        document.getElementsByTagName("html")[0].classList.add("loading-delay");
    }, 3000);
</script>

参考

https://jajaaan.co.jp/web-production/frontend/fout/

https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092

https://blog.aroundit.net/webfont-fout/

・複数ロード例
https://mogumogu-design.com/googlefont-yomikomi/