search
LoginSignup
181

More than 3 years have passed since last update.

posted at

updated at

Organization

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

💀 Webフォントの問題点

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

従来の読み込み開始からの時間経過.png

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

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

font-display_swapを使用時の時間経過.png

この問題の従来までの改善方法は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の比較サンプル

See the Pen Test of 'font-display' by oreo (@oreo) on CodePen.

Test of 'font-display' | codepen.io
(是非CodePenへアクセスし、リロードして確認してみてください)

🙏🏻 終わりに

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

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

🔗 リンク


  1. FOIT(flash of invision text) 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
181