Webフォント使用時に、Webフォントが使用される前にデフォルトのフォントが表示されてしまう時ってあります。それらの事象をFOUTと言います。
一瞬デフォルトのフォントが表示され、その後Webフォントに切り替わる、といったチラつきがおきることなのですが、そのチラつきの改善方法について解説していきたいと思います。
FOUTとは
FOUTとは、Flash of Unstyled Textの略称です。
実はブラウザによってWebフォントのレンダリングを行う過程は異なり、Chrome、Firefox、safari、Edgeなどは、ダウンロードが完了するまでレンダリングを保留して、ダウンロードが完了した時点でレンダリングを行います。
このWebフォントが適用されるタイミングで再レンダリングが発生することをFOUTと言います。
FOUT対応については、いろいろ意見がある
FOUT対応については賛否両論があります。
Webフォントはその多くが読込みに時間がかかり、チラつきが気になるので直したいという人もいれば、Webフォントが読み込まれる前に代替テキストでいいからテキストが表示されるようにしておくべき、といった意見もあります。
チラつきをなくす方法
チラつきをなくす方法については基本的に、Webフォントのダウンロードが完了するまで、該当箇所を非表示にさせておく、といったものになります。
前述のとおり、非表示にさせておくくらいなら代替テキストを表示させるべき、といった方は、フォント読込みの最適化をするしかなく、チラつきは防げません。チラつきは一瞬なので、できればFOUTを無くしたいと思う人が大半ではないでしょうか。
Web Font Loaderを使う
参考：BinarApps – FOUT with Web Font Loader
Web Font Loaderを使用します。
Web Font Loaderはフォント読込みでGoogle PageSpeed Toolsでも推奨される方法です。Web Font Loaderの使い方自体はとても簡単で、以下JavaScriptを読み込みます。
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP'] },
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);
})();2行目の部分に読み込みたいWebフォントを指定します。
複数指定をすることもできます。
上記を読み込むと、htmlタグに以下のようなクラスが付与されます。
/* ダウンロード実行時 */
<html lang="ja" class="wf-loading">
/* ダウンロード完了時 */
<html lang="ja" class="wf-active">あとはCSSで以下のような非表示のスタイルを記述します。
p {
visibility: hidden;
}
.wf-active p {
visibility: visible;
}以上で完了です。
もしWebフォント読込みに時間がかかる場合で、かつ非表示はやめたいといった場合は、wf-loadingを使い、できるだけWebフォントと似たテキストを表示させておくようにします。そのようにすることでFOUTの影響をできるだけ目立たせなくすることができます。
結局はWebフォントの最適化が重要
FOUTを防ぐ方法についてですが、どちらにせよWebフォントの読込みを最適化させる必要があります。
必要なフォントのみ最適化された形で読み込む必要があります。
よければご参考ください。
