Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

💀 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) 

oreo
「壊したCSSの数だけ強くなれる」
goodpatch
Goodpatch(株式会社グッドパッチ)は東京、ベルリン、台北にあるWeb / iOS / AndroidなどマルチデバイスアプリケーションのUIデザイン会社です。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした