僕はウェブフォントの実装はFOUTを強いる形がベストだと今のところは考えている。とにかく文章が読める状態をできる限り確保するべきだと思うからだ。だがなかなかFOUTの良さを説明することは難しい。どうしても他の手法の欠点を強調しがちで終わっていた。そういう時にFOUTをプログレッシブ・エンハンスメントととらえて説明するのは良さそうだ。
ウェブフォントの読み込み状況と文書のレンダリング状態を分けてとらえ、前者の状況の変化を後者へと段階的に反映させるというわけだ。そうすることで常に最低限の形で文書が表示されることが担保され、ネットワーク状況の劣悪さにユーザーの読者としての体験が左右されなくなる。
このウェブサイトではFOUTに近い形になるようにしているが、ウェブフォントを読み込むためのCSSを非同期に読み込ませているだけだ。CSS Font Loading Moduleで定義されているウェブ標準APIやWeb Font Loaderは利用しておらず、クラスによる制御もしていない。これはフォントの読み込みを待つのにくらべ実装が簡単な点で大きく勝るが、フォントの読み込みに時間がかかると文字が読めなくなる可能性があるという欠点もある。
その欠点はウェブフォントが500KBを超えるあたりで表面化する。幸いCSS Font Loadingのpolyfillがしばらく前に書き直されたようで、まずはこちらに期待すると良さそうだ。その一方でウェブフォントの反映の仕方を制御するためのCSS仕様も提案されているようで、こちらだと更にコストは下がるだろう。未来は明るい。