スマートな方法でカスタムフォントをロードする方法

この記事はもともと私の中に掲載されましたpersonal blog .
最近、ウェブページのサイズは以前より大きいです.帯域幅の改善のおかげで、それはあなたがサイトに大きな画像を持ってもすべてをロードするのは速いです.
しかし、これはあなたのユーザーのサーフィン経験を傷つけるかもしれません.ハードルの1つはあなたの空想のフォントです.

問題
たとえば、多言語のウェブサイトを持ち、それぞれの言語には、英語と日本語などのカスタムフォントがあります.ユーザーは、あなたのサイトをロードするために巨大な帯域幅を必要とするでしょう.さらに、彼らは「見えないテキストのフラッシュ」またはいわゆる泡を見ます.
どのようにこの問題を解決するには?

1 .現代のフォントタイプ( Woff , Woff 2 )を使う
まず、フォントの顔を定義したCSSファイルを確認してください.次のようになります.

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

今すぐあなたが見ることができる、さまざまなブラウザをサポートするためにフォントタイプの多くがあります.woff and woff2 現代のブラウザーのために.truetype and embedded-opentype レガシーブラウザなど
実際には、フォントのロード順序はsrcの順序に基づいています.つまり、ブラウザがロードしたい場合truetype まず、上に置くことができます.この例では、ブラウザがロードされますeot ファースト.
残念ながらeot のように最適化されませんwoff and woff2 , すなわち圧縮されない.常にロードする方が良いwoff or woff2 , 両方の近代的なブラウザによってサポートされ、内蔵の圧縮があります.圧縮では、ファイルサイズはeot など
この例では、次のように変更します.

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

それがサポートしていない場合、ブラウザが自動的に次のエントリにフォールバックされますwoff2 .

2 .高速にロードするフォント表示の使用
“目に見えないテキストのフラッシュ”を防ぐために、より良い使用するfont-display あなたのスタイルシートで.

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

デフォルトでは、ブラウザはautofont-display: block , この設定では、カスタムフォントを読み込み終了する前にテキストを読み込みます.それは、ユーザーが非スタイルのテキストのフラッシュが表示されます理由です.
その他の設定swap , fallback and optional 別のブロック期間があるので、1つのスーツを選ぶことができます.
たとえば、カスタムフォントを使用してヘッダーを持っているだけで、カスタムフォントでそれを表示するには、使用することができますfallback . ブラウザは約100 msのテキストを非表示にし、フォントがまだダウンロードされていない場合は、フォールバックテキストを使用します.
あなたが何を必要とするかについて慎重に考えてください、そして、あなたはあなたのウェブサイトのために最高のオプションを発見することができなければなりません.

If you are using Google fonts, now you can set font-display by adding &display=<your-display-type> at the end of Google Fonts link. For example: https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=block.

Unicode範囲のサブセット
異なる言語を持っているウェブサイトのために、例えば、日本語と英語版で一つのページアプリ(SPA)は、通常両方とも異なるフォント顔を持ちます.英語ページを開くと無駄ですが、ブラウザも日本のカスタムフォントを載せていますね.どうすればこの問題を解決できますか?

/* Japanese fonts example */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-jp-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-jp-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

解決策unicode-range . Unicode範囲を設定すると、各言語に最適なフォントが読み込まれます.通常、英語はunicode-range: 0020—007F . より多くの言語についてはunicode-table .

ローカルでフォントをホストする
ローディングフォントのボトルネックの一つは速度です.他のサーバーからフォントを呼び出す必要がある場合は、Googleのフォントのように、ページをロードする必要があります.用途Google Font Helper すべてのフォントファイルをダウンロードして、それをホストします.
あなたのフォントがより速くロードするとき、foitを得る機会はより少なくなければなりません.

プリロードフォント
ほとんどの開発者が忘れているマイナーはpreloadタグです.あなたのフォントを高速にするには、追加することができますpreload あなたのフォントファイルに.残念ながら、このトリックはFirefoxのようにすべてのブラウザで利用できませんが、まだ使用できませんpreload . 詳細については、caniuse.com

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

ファイナル
このポストをお楽しみください!Webパフォーマンスについてのあなたの考えやトリックを共有する歓迎)

続きを読む

Web Font Optimization

font-display - MDN

font-display - CSS-Tricks