web font loading recipes
1.0.0
さまざまなWebフォントロード戦略のためのデモの束。これらのいくつかは、フォント読み込み戦略の包括的なガイドに含まれており、それらのいくつかはより実験的です。
デモはhttps://www.zachleat.com/web-fonts/demos/でホストされています
Webフォントは進歩的な拡張機能であり、CSSフォントロードAPIのサポートが増えているため、ヘッダーにポリフィルをインラインにする必要がない時間を楽しみにしています（さらに高速なフォントの負荷のために）。簡略化されたCSSフォントロードAPIレシピはデフォルトですが、ポリフィードバージョンはより広範なブラウザーサポート用に含まれています。ポリフィルされたバージョンのみが、インターネットエクスプローラーとエッジWebブラウザーのWebフォントのみを表示します（CSSフォントロードAPIのサポートはありません）。
font-display: swap@font-face descriptorpreload<link>タグfont-display: swap preloadと交換します<link>タグとcss ： @font-face descriptorfont-displayとpreloadの詳細をご覧ください上記と同様ですが、クラスを使用せずに、CSSフォントロードAPIのみを使用します。これには、CSSの変更は必要ありません。これは、プログラムでJSを使用してWebフォントを注入します。 @BramsteinのWebFontハンドブックでこの方法を最初に見ました。
.style.fontFamilyメソッド（1ページごとに1つのファミリでのみうまく機能します）、@simevidasからのツイートでこれを最初に見ました最初の段階で1つのローマンフォントファイルを使用して（フォント合成を備えた）2つのステージロード。
preload付きの重要なFOFT<link>タグとJavaScript ：CSSフォントロードAPIfont-display: optional 。font-display: optionalを備えたpreload付きの重要なFOFT：オプション<link>タグとJavaScript ：CSSフォントロードAPIとfontfaceObserverポリフィルこれらは必ずしも単独でフォントロード戦略ではありませんが、既存の戦略を重ねてペアリングできる追加の強化です。
遅い接続速度でWebフォントをオプトアウトします。
prefers-reduced-motionユーザーがReduce Motionできる場合、Webフォントをオプトアウトします。
save-dataユーザーがData Saverモードを有効にしたときに、Webフォントをオプトアウトします。
おそらく、ある時点でこれらに関するブログの投稿を見るでしょう。
font-display: optionalさあ。 ？
古いブラウザは、タイムアウトなしでFOITをレンダリングするために使用されていましたが、実際にはWebフォントが単一の障害ポイントになりました。 Woff2を使用すると、Webフォントに3秒のFOITタイムアウトがあるマスタードを最新のブラウザにカットします。ここでは考えられないテキストですが、このアプローチに言及する価値があります。
font-synthesis良い最終製品ではありません。
<style>インジェクションJavaScriptを使用して、 @font-faceブロックを備えた新しい<style>内部に注入するもの。本当に悪い塗り直しコスト - これを避けてください。これは、上記の非同期データURIメソッドで使用されていますが、パフォーマンスの悪い方法でも一般的です。
font-display: optionalとpreloadfont-display: optionalでpreload ：オプションはアンチパターンですfont-displayのみを使用してFOFT（フォントfont-family font-display値を混合）この方法には現在、クロスブラウザーのサポートがありません。これが変わることを望んでいます。
swap / 3 optional ） これは人々が試みる一般的なことです。彼らはCSS（およびCSSのみ）を非同期にロードします。ヘック、私はこの動作を使用して、Webフォントの読み込みの調査を開始しました。
@supportsとfont-displayfont-displayを使用してFOUTを使用できる場合にのみWebフォントを使用するのがいいかもしれませんfont-displayがサポートされていない場合（そしてJS依存関係なしでうまく機能する場合）、クラスとのFOUTを持っているといいかもしれません）@supports 、フォントフェースの記述子では動作しません。font-familyスタック2つ以上のfont-family Webフォントを単一のfont-familyスタックに入れます。
失敗：フォントマッチングアルゴリズムは、一致してロードしようとする最初のWebフォントを選択します（後続のWebフォントファミリを無視します）。サブセットの最初の段階preloadも、 font-family注文の優先順位により交換されます。
コード
デモ
更新：上記の問題をfont-displayで軽減し、おそらくfont-familyスタックと@font-faceブロックの順序を変更することができますが、大きなバージョンがロードされた後、ページから不要なサブセットウェブフォントを削除することに依然として問題があります。これらのフォントファイルの境界を越えてグリフで発生するフォント機能は壊れます（Kerning、Ligatures、et Cetera）。関連して、CSSフォントロードAPI（仕様ごと）を使用してCSSペアのFontFaceオブジェクトを削除することはできません。
**これらのメソッドは、デフォルトのフォント読み込み動作を利用することにより、インターネットエクスプローラーとEDGEでFoutであることに注意してください。
