CSSでwebフォントの読み込みが遅い問題を改善する方法

  • 74
    Like
  • 3
    Comment

Webフォントの問題点

Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。
ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。
この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。

読み込み開始からの時間経過

'font-display'プロパティでこの問題に立ち向かう

font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示に使用することができるようになります。これによってユーザーはいち早くテキストを目にすることができるようになります。

読み込み開始からの時間経過

この問題の従来までの改善方法はJavaScriptを記述しないと実現することはできませんでした。しかしながら、chrome49から追加、chrome60では正式採用された'font-display'プロパティを用いることで、ワンライナーでこの問題の対処をすることができます。

スタイルシートの記述方法

具体的には、下記のようにfont-faceに対してfont-display: swapを適応させることで改善させることができます。

css
@font-face {
  font-family: "font name";
  font-weight: 400;
  font-style: normal;
  src: url("fonFile.woff2") format("woff2");
  font-display: swap;
}
css
p {
  font-family: "font name", sans-serif;
}

上記のスタイルを適応すると、webフォントが読み込まれるまでは一時的にsans-serifを読み込んだ上でテキストの表示に使用されます。

font-displayの比較サンプル

font-displayを用いたwebページのサンプルは下記の通りとなっております。併せてご覧ください。
Test of 'font-display'
Test of 'font-display' | codepen.io

終わりに

テストはgoogle fontsで行いましたが、google fontsは軽くて優秀過ぎたのであまり効果を実感できませんでした。
欧文フォントよりも、ファイルサイズの大きい日本語フォントであれば十分に真価を発揮するかと思います。

これから、よりwebフォントの使用の場が増えてくると思います。その中でユーザーの体験の質を低下させることを防ぐために、この'font-display'プロパティは大いに役に立つ存在になるはずです。現在はchrome60でしかサポートがされていませんが、対応ブラウザの増加を願ってやみません。将来的にwebフォントと一緒に使っていければと考えています。

リンク


  1. FOIT(flash of invision text)