フォントフェイスの読み込み遅延を避ける

Question

font-faceの遅延ロードを避ける実際の方法はありますか？

Paul Irish about this FOUTのブログポストがあります（文字化けしています）。その2009年から。

過去3年間に進歩はありますか？

Answer 1

あなたは2つの別々の問題を提起しています。

実際のフォントファイルのダウンロードが遅れることは避けられませんが、実際には必要のないものは含めないことで、全体のファイルサイズを最小限に抑えることができます。使用しているサービス/方法によっては、含まれている文字セット（/言語）、およびウェイトとスタイルを減らす必要があります。

上記のダウンロード時間の問題のため、部分的に避けられないテキストのフラッシュについては、部分的には避けられません。しかし、できるだけ減らしたら、フォントローダーを実装してこの部分をよりよくコントロールする必要があります。ここにはTypeKit's (open-sourced) implementationとbrief explanatory blog postがあります。一番下の例は特にFOUTを示しています。あなたはそれを自分のコードに入れるだけです。
サービスのGoogleローダーを使用する場合は、information from FontDeckがあります。これにより、GoogleのWebFontsサービスでも同じものが使用されます。

他のサービスであれば、独自の調査を開始する必要がありますが、それは一般的な概念です。これらのツールを使用すると、多少のスクリプトやCSSルールを使用して、フォントがプレゼンテーションの準備が整うまで、他の用途の中で影響を受けるテキストを隠すことができます。それは完全には考えていませんが、少なくともFOUTを防ぎます。その初期の時間を過ぎると、ブラウザのキャッシュが引き継ぎ、それを大きく欺くべきです。

Answer 2

A）のCache-Control、正しくコンテンツタイプを設定することにより、フォントをキャッシュ：

Cache-Control:public, max-age=15552000 
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files) 

B）ヴァリヘッダーにHTTPSを避けてください。 Accet-Encodingのみを設定します。 ザは変化：HTTPS breaks IE font loading.

Vary:Accept-Encoding 

https://github.com/typekit/webfontloader

C）AとBは、ブラウザが既にフォントをロードした最初の要求、後に完全に機能しなければなりません。これが十分でない場合は、Web Font Loaderを試してください。