ShopifyのWebフォントによるチラツキをなくす方法

このチラツキをなくす方法も簡単です。 以下のコードをスタイルシートに追加するだけです。

簡単に説明すると、Adobe Fontsを読み込むJavaScriptがwebフォントの読み込みが完了した時点で、htmlタグにクラス名「.wf-active」を自動で挿入してくれます。これを利用してまずhtmlタグに「.wf-active」クラスが付与されたときにvisibilityをvisibleにする。

そして普通の状態（webフォント）が完了していないときはhtmlタグのvisibilityをhiddenに設定してあげれば、webフォントの読み込みが完了したときにだけhtmlタグというルート（根元）以下のすべての要素が表示（visible）されるようになります。

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

百聞一見にしかず。言葉での説明より実際に見てみたほうが早いので、見てみましょう。

真っ白の画面が一瞬（大体1秒くらい？）表示されますが、これくらいであれば殆ど気になります。設定したwebフォントもちゃんと読み込まれてます。

もし真っ白な画面の表示が気になる場合は、loader ローダーを実装してもいいかもしれません。

↓のような感じにloader ローダーを付けてみました。

回線速度が遅くなければ、以上のような方法で問題ありません。
ただ回線速度が3Gなど遅い場合のときに、以上のような実装だけだと
いつまでたっても真っ白な画像のままで何も表示されない現象が生じてしまいます。

（Google Chromeの開発ツールのNetwork → Fast 3Gを選択して、擬似的に3Gの回線速度の状態を作り出しています。）

↓ような感じで20秒近く真っ白でも何も表示されている状態が続いてしまいます。これは明らかに問題なので、これを回避するためにCSSとJavaScriptを少し追加します。

CSSを以下のコードにして、

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

JavaScriptも下のものを追加します。
theme.liquidの</body>の直前のAdobe Fontsを読み込んでいるコードの下あたりに挿入するのがいいでしょう。

setTimeout(function () {
   document.getElementsByTagName("html")[0].classList.add("loading-delay");
}, 4000);

4秒経ったら、webフォントが読み込まれてなくても「loading-delay」というクラスをhtmlに付与してvisible（表示）させるようにしました。

こうすると、回線速度が遅くても真っ白な画面がずっと表示されるということはなくなりました。それでも回線速度が遅いので、webフォントを読み込むのにそれなりの時間はかかります↓

https://vimeo.com/455362135

（何故かリンクurlのまま動画として反映されないので、このままにしています。）

以上の方法でWebフォントによるチラツキを大体解決できるので、Shopifyにwebフォントは読み込んだのはいいけど、このチラツキに困っているという方は試してみてください。

通常の回線速度だとそこまで気にはなりませんが、回線速度が遅い状態でサイトを閲覧しているユーザーも意外といます。そういったユーザーも想定して前もって実装できると後々不必要な問題にもなりません。

Shopifyに簡単にWebフォントを読み込む方法は↓の記事に書きました。

ShopifyにWebフォントを簡単に読み込む方法

Nirvana Lab.ではShopifyでのECサイトの制作・構築、Shopifyのテーマカスタマイズ、他社ECプラットフォームからのShopifへの移行だけでなく
翻訳・ローカライゼーションもに対応しておりますので、まずは何でもお気軽にご相談くださいませ。

https://nirvana-lab.com/portfolio/