Google FontsやAdobe TypekitのWebフォントを利用すると、IEなどのブラウザはWebフォントのダウンロードが完了するまでは代替フォントでテキストを描画します。 その後Webフォントのダウンロードが完了した際にWebフォントを用いたテキストの再描画を行い表示を切り替えます。 このテキストが切り替わる瞬間に文字幅の変化によるコンテンツの移動やちらつきのような現象が発生します。 特にこのちらつき現象はWebフォント以外の原因で発生する描画のちらつきも含めてFlash Of Unstyled Text (FOUT)と呼ばれているようです。 今回はこのテキストの再描画を防ぐ方法を紹介します。CSSだけで設定できますのでとても簡単です。 テキストの再描画についてデモコード設置方法参考サイト 1.テキストの再描画について Google DevelopersのWebフォントの解説に
![Webフォント読み込み時の「再描画ちらつき」をなくす方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e7c85e8c9a3948d469962c1bc13933084538f3b/height=288;version=1;width=512/https%3A%2F%2Fblog.aroundit.net%2Fwp-content%2Fuploads%2Fsites%2F2%2F2015%2F10%2Frerendering1.png)