ウェブフォントはフォントファイルがダウンロードされて初めて利用可能になります。IEなど一部のブラウザはウェブフォントをダウンロードしている間、コンピュータにインストールしてある別のフォントを使って”とりあえず”テキストを表示します。そしてフォントのダウンロードが完了すると、ウェブフォントでテキストを再表示します。この様な動作はビジターがすぐにテキストを読み始められる反面、フォントが急に入れ替わって違和感やチラつきを感じさせる要因にもなります。こうした一瞬スタイルが適用されていないテキストが表示されることをFOUT(Flash of Unstyled Text)と言います。

FOUT

このビデオはGoogle Fontsからウェブフォントを読み込んでFOUTが発生している様子のブラウザ画面をキャプチャしたものです。WEBPAGETESTを使い、ブラウザはIE11です。HTMLはこちら。

fout_ie11

ウェブページの読み込みを開始してから1,4秒後にデフォルトのフォントで表示され、2秒後にウェブフォントが適用されています。

ウェブフォントをダウンロードしている間、テキストを非表示にする

Web Font Loaderを使ってウェブフォントを読み込むと、<html>にウェブフォントのロード状況を示すクラスを追加します。

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

例えばOpen Sansの標準フォントがロード中は、.wf-opensans-n4-loading、ロードが完了すると、.wf-opensans-n4-active、ロードに失敗すると、wf-opensans-n4-inactiveというクラスになります。n4というのはfvdといって、フォントの@font-faceプロパティをシンプルに表したものです。例えば、

font-style: italic;
font-weight: 500;

これはi5というfvdになります。

FOUTを防ぐには、これらWeb Font Loaderが追加するクラスを利用して、フォントロード中はテキストを非表示にします。フォントのダウンロードが完了し、wf-<familyname>-<fvd>-activeになると、非表示から表示に変更し、FOUTを回避します。

p{
  font-family:'Lobster', sans-serif;
  font-size:5em;
  visibility:hidden;
}

.wf-lobster-n4-active p{
  visibility:visible;
}

この様な、スタイルにすると次のような表示になります。上のビデオと同じく、WEBPAGETESTでIE11でキャプチャしています。HTMLはこちら。

nofout

いきなりウェブフォントでテキストが表示され、FOUTが発生していないことが確認できます。

なお、複数のウェブフォントを利用している場合には.wf-activeなどのクラスをセレクタに利用すると便利です。これらのクラスは全てのウェブフォントのロードが完了すると追加されます。

FOUTは避けるべきか

FirefoxやChromeでは基本的にFOUTは発生しません。このポストによれば、これらのブラウザはウェブフォントが使われている文字を透明状態で表示し、ウェブフォントのロード開始から3秒以上経ってもロードが終わっていない場合のみデフォルトフォント（フォールバックフォント）で表示します。つまり、ウェブフォントのロードに３秒以上かかってしまった場合のみFOUTになります。

Safari では、フォントのダウンロードが完了するまでテキストの表示が保留されます。
Chrome と Firefox では、フォントの表示が最大 3 秒間保留されます。その後で代替フォントを使用し、フォントのダウンロードが完了すると、ダウンロードされたフォントを使用してもう一度テキストを再表示します。
IE では、リクエストされたフォントがまだ使用できない場合は代替フォントを使用して即座に表示を行い、フォントのダウンロードが完了した時点で再表示を行います。

FOUTの発生するIEは劣っていて、FOUTが発生しにくいChromeやFirefoxが優れているのでしょうか。そうとも言い切れないはずです。この問題は議論のあるところであって、個人の好みやウェブページの種類、ウェブフォントの使い方に大きく左右されるからです。重要なのはWeb Font Loaderを利用することで、ウェブ制作者がFOUTを防ぐことも、或いは、強制的にFOUTを起こすこともコントロール可能な点です。A/Bテスト等で最も適した表示を探ってみてください。