Webフォントを使用する、最良の方法（2015年）

フォントのローカルコピーを使用して、可能な限り高速で効率的にロードするために、フォントのダウンロードの問題を最近調査しました。 このアプローチは、TypeKitまたはGoogleフォントと単純なコピー/貼り付けスニペットを使用する場合とは大きく異なります。



過去数ヶ月にわたって、さまざまなフォント読み込み最適化手法の問題に対処するための記事がいくつか執筆されました。



1、2、3



それらをすべて読んだ後、それらで対処されていないいくつかの新しい質問を発見しました。 最終的には、そのような問題に関する情報を収集するリソースを1つ用意したかったのです。 いくつかのコードスニペットは、上記のリンクから引用した記事から引用または修正されています。



目的：

1. Webフォントを非同期にダウンロードする
2. レイアウトの強力な再計算を避ける
3. Webフォントをできるだけ早くダウンロードする
4. 再訪問者用のフォントのロードを避ける

そして、目標を段階的に達成してみましょう。

1. Webフォントの非同期ダウンロード

@ font-faceを介してWebフォントをローカルで呼び出す必要があるため、通常はブロック要求を受け取ります。 これを避けるには、JavaScriptから呼び出される別のスタイルシートに@ font-faceコードを配置する必要があります。 フィラメントグループのシンプルなloadCSS関数を使用できます。 これが最も簡単なオプションです。



typekit webfontloaderをカスタムWebフォントで使用することもできます。これは、バージョン1.6.8以降、使用可能な場合はネイティブフォントダウンロードAPIを使用します。



現時点では、 Font Face Observerと、最新のW3Cフォント読み込みイベントを使用するFont Loaderもあります。また、Smashing Magazineを使用するスクリプトもあり、実際、この記事のいくつかの問題を解決しています（すべてではありません）。



それでは、どこから始めますか？ まず、Font Loaderを除外して、最新のWeb標準のポリフィルを提供します。 パフォーマンス最適化フェーズのこの部分に含めるには大きすぎます。 将来的には間違いなく必要になりますが、「ネイティブ」でない場合は、現時点では使用する意味がありません。 代わりに、Font Face Observerを使用できます。 重量はわずか5Kbです（圧縮ではなく、縮小されます）。



さあ、始めましょう。 Font Face Observerスクリプトは、npm、bower、またはgit（ハブ）から取得できます。 スクリプトを頭に含めます。



注：async属性をカスタマイズすると、サイトのFOUTに不要なFOITが追加されます。



次に、フォントブラウザを初期化する必要があります。 これは、組み込みスクリプト、またはヘッドに含まれる外部スクリプトを使用して実行できます。 外部スクリプトでbrowserify / CommonJSオプションを使用する例を示します。スクリプトはnpm依存関係としてロードされます。



まず、ライブラリをリクエストする必要があります。

var FontFaceObserver = require('fontfaceobserver');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、識別する必要があるフォントとフォントオプションを定義しましょう。

  var observer = new FontFaceObserver('Fira Sans', { weight: 400 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、オプションとして、ウェイト、スタイル、バリアント、featureSettings、stretchを使用できます。 ここで、Observerを初期化して、定義したフォントを構成する必要があります。 また、フォントがロードされたCSSクラスを設定する必要があります。 これは、Promiseを介して行われます。

  observer.check().then(function () { document.documentElement.classList.add('webfont-loaded'); }, function () { console.info('Web font could not be loaded in time. Falling back to system fonts.'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そこで、Font Face Observerを適用して、完成したフォントクラスを設定しました。 次に、これをCSSに反映する必要があります。

  body { font-family: sans-serif; } .webfont-loaded body { font-family: 'Fira Sans', sans-serif; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.レイアウトの強力な再計算を排除

これで、準備ができたときにWebフォントを埋め込むことができる、効果的で信頼性の高いシステムができました。 これは、もちろん、最初にユーザーが定義した移行フォントを受け取ることを意味します。 これは悪くないという事実にもかかわらず、彼らはすでにテキストを読み始めている可能性があるため、これはすべてが目の前で変化することを意味し、多くの場合、フォントの変更による単語の移動につながります。



体験をもっと楽しくする必要があります。 これは2段階で実行できます。

1. 最初に、Webフォントに最適な移行フォントを見つける必要があります。 これは、 この小さなブックマークレットとこの互換性チェックを使用すると最適です。 適切な移行フォントが見つかったら、半分の作業が完了します。 しかし、同じように見える単一のフォントはなく、非常に類似したトランジショナルフォントでさえ、異なる幅と高さの文字を持つことができます。 幸いなことに、CSSにはこれを最適化するためのツールがいくつかあります。 新しいfont-size-adjustプロパティがあり、これにより、移行フォントをWebフォントに、またはその逆に調整できます。 これを使用して、高さまたは形状を調整します。 使用するのは非常に難しいので、devツールで値の一部を試すことをお勧めします（または、数学をよく理解している場合は、リンク先の記事の式を見てください）。 通常、結果は0.40〜0.70の値です。
2. 高さを選択したら、文字間隔（文字間の距離）を構成する必要があります。 これは比較的簡単で、値を少しずつ（たとえば-0.01em）調整すると、テキストが見やすく、読みやすくなることを保証できます。 この時点で、Webフォントに非常によく似た遷移フォントの視覚化を取得する必要があります。 テスト中に違いを感じるために、webfont-loadedのCSSクラスを設定する関数にタイムアウトを追加できます。

3. Webフォントの最速ダウンロード

このアイテムはとてもシンプルです。 実際、Webフォントができるだけ早く読み込まれ、適切なタイミングでオンになるように、すでに多くのことを行っています。 ここで最後にできることは、Webフォントファイルのプリロードヘッダーを追加することです。

  <link rel="preload" href="FiraSans-Regular.woff"> <link rel="preload" href="FiraSans-SemiBold.woff">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ここではwoffフォントのみを使用しました。 これは、ここではすべての形式を呼び出すべきではないためです。 この小さなスニペットは、可能であれば、これらのリソースをダウンロードする必要があることをブラウザーに伝えます。 ここにすべての形式を追加すると、ブラウザはそれらをすべてダウンロードしますが、これは役に立ちません。 ただし、プリフェッチをサポートするすべてのブラウザーはWOFFもサポートしています。 woff2を使用する場合は、機能しないことに注意してください。したがって、これらのヘッダーを追加しないでください。

4.再訪問者のフォントダウンロード例外

ユーザーがWebフォントをリロードし、フォントがキャッシュから既にアクセス可能なときにJavaScript Font Face Observerの最新バージョンを実行しないという状況を排除するには、cookieまたはlocalStorageを使用できます。 Cookieを使用して、このフォントがブラウザキャッシュにあるかどうかのみをチェックする場合、localStorageは、より長いストレージ用のフォントをlocalStorageに配置し、ユーザーがサイトに再度アクセスするとそこからフォントを取得します。



どちらのオプションにも利点があるため、だれにも優先しません。 localStorageはフォントのキャッシュに関してはより信頼性が高いですが、Cookieやブラウザーのネイティブキャッシュよりも若干遅くなります。 あなたが一番好きなものと、プロジェクトでより良く機能するものを使用してください。



クッキーの使用 ：



この方法は少し信頼できません。 ブラウザのキャッシュはCookieの保存場所に直接関係しないため、どちらか（両方ではない）が削除されると、この方法によりフォントのダウンロードがブロックされる可能性があります。



SSIを使用した最も単純なコードは次のようになります。

 <!--#if expr="$HTTP_COOKIE=/webfont-loaded=true/" --> <html lang="en" class="webfont-loaded"> <!--#else --> <html lang="en"> <!--#endif -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

localStorageの使用： Smashing Magazineがサイトで使用するこのバージョンのコードを利用できます。



localStorageはかなりうまく機能するという事実にもかかわらず、その使用はネイティブキャッシュを使用するよりも若干遅くなる可能性があり、さらに重要なことには、ユーザーのディスクのスペースを占有し、1つのドメインのみに対して作成されることを考慮する価値があります。 したがって、ユーザーが同じWebフォントを使用して別のサイトにアクセスすると、UAはそれを再度ダウンロードします。

次は？

ここ数か月と数年で見てきたように、Webフォントの使用方法は常に変化しています。 ブラウザはFont Load Eventsを使用し、CSSプロパティを使用してFOITを操作できます。 最終的に、フォントレンダリング、フォントレンダリング：スワップは、この記事で説明したすべてを大幅に簡素化できます。



いくつかのスタイルや彩度オプションを削除して数バイトを節約したい場合、人工フォントが許可されていてフォント合成がない場合は、ブラウザーの動作をカスタマイズしてみてください。

---