仙台・宮城のWEB担当者の方こんにちは！
皆さんは「WEBフォント」使っていますか？Googleが無料で提供していることもあって使用しているサイトも多く見かけるようになりました。
このWEBフォントは、CSSやJavascriptを数行追加するだけで使用できるので大変有難いものですが、欠点があります。
WEBフォントの欠点
それは、WEBフォントを読み込んで、ブラウザの表示に反映されるのにタイムラグがあるため「一瞬だけスタイルが適用されない状態で表示されてしまう」ということです。
body {
font-family: "メイリオ" ;
}
h1 {
font-family: heisei-kaku-gothic-std, sans-serif; //WEBフォント
font-weight: 300;
font-style: normal;
}
上記のような感じでWEBフォントを指定していると、一瞬だけメイリオで表示され、画面が「ちらついている」ような感じになってしまうんです。
WEBフォント「ちらつき」の解決方法
というわけで、早速解決方法です。以下のCSSを追加するだけで解決してしまいます！
html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}
あっけないほど簡単ですね。
具体的に何をしているかというと「読み込みが完了するまで全体を表示させない」ということです。
ポイントは.wf-active
.wf-activeはWEBフォントの読み込みが完了したら付加されるクラスです。とりあえずvisibility: hidden;でhtml全体を非表示にしておいて、読み込みが完了したらvisibility: visible;が反映されて表示されるという流れです。
本当に簡単なんですが、バッチリ解決してしまいますよ！
