Webフォントって遅いっていわれていますが、そんなことはありません。遅くなる原因はWebフォントでないことが少なくありません。別の要因も多く考えられることがあります。ただ固定観念的にWebフォントは遅いと考えてしまう傾向があると思います。
Webフォントを表示するまでの間に、ブラウザは画像をレンダリングしたり、JavaScriptを走らせたりする、すべてのDOMを読み込んだ後に、Webフォントをシステムフォントから切り替えるんですね。だからページの速度が遅いとかんがえられてしまいます。
ただ、WebフォントのないWebは、面白くないですよね。
もしかしたら、責任を持ってWebフォントを使用することでデメリットを最小限に抑えながら、メリットを受けるようにしたいです。
Webページに表示するフォントは通常、システムフォントとWebフォントがあります。
ブラウザがCSSの@font-faceルールにより、Webフォント対応するようになった2010年頃から少しずつ、Webフォントが使われるようになりました。これに伴って、CSSで表現できるデザインの幅が広がりました。
欧文（アルファベット）に比べて、和文（日本語）は大体2万文字くらいあります。全部ダウンロードすると、明朝体の場合、10MBを超えるケースもあります。だから当時、「日本では、流行らない」と懐疑的な意見が多かったのも事実です。
システムフォントはOSにインストールされているフォントです。Webフォントは表示用にフォントファイルを用意する必要があります。
デバイスフォントファーストのアプローチを推奨し、デバイスフォントと比較してWebフォントはパフォーマンスに悪影響を及ぼし、より多くのデータを使用し、サイトのエネルギー消費量を増加させると解説しました。
基本的にはWebフォントを利用することでサイトやページに対して下記2つの影響があります。
それぞれの詳細については下記で説明します。
Webフォントのパフォーマンスを向上させるためのテクニックについてお伝えします。
WEBフォントとは？ちらつき対策は？
PageSpeed Insightsスコアを少しでも現在の点数よりも改善したい場合にはWebフォントの利用は控えた方が良いのは間違いないです。
Webフォントの読込を停止するだけでも結構スコアは改善します。
ただ、それはブラウザは画像をレンダリングしたり、JavaScriptを走らせたりする、すべてのDOMを読み込んだ後に、Webフォントをシステムフォントから切り替えるからです。
せきゆおうさんが過去にWebフォントのPSIスコアに対する影響を比較したツイートがありますのでそちらもご参考にどうぞ。
Webフォントの問題点（デメリット）！遅いしちらつきがある！遅延読み込みやダウンロード遅い
読み込まれるファイル数が増える
Webフォント読込には最低でも一つのCSSファイル、そして一つのフォントファイルが読み込まれます。
日本ではLTE（4G）で転送量も潤沢なので重いページを読み込んでも通信環境を踏まえれば大丈夫ではあります。ただ、SEOの観点だと世界です。Google側から見ると世界各国になります。
よって遅い回線だったり転送量が多いと不利になる国や地域もあるのでウェブサイト基本設計として軽いサイトで済むようにデザインするというのは大事です。
CDN等のネットワーク遅延の影響を受ける
CDN自体は高速化にとって必ずしもマイナスではありません。フォントファイルを外部サーバーから読み込むとネットワーク遅延の影響を受ける事が結構あります。
例えば日本のレンタルサーバーでは50ms～100ms程度で読み込まれているウェブサイトの個別ファイルがあるに対して、外部サーバーのネットワーク遅延が発生しているとフォントファイルがそれぞれ500ms～1000ms等かかる場合があります。
仮に同サーバー上にフォントファイルを設置していれば遅延の影響を最小限に抑えられますが、これはあくまでサイトの対象が日本国内にいるユーザーに限ります。
Webフォントにも使用量がかかることがある！GoogleフォントWEBは？
WEBフォントには有料と無料のものがある。
有料Webフォントには、従量課金（PV数依存）や一括払いなどの料金プランがあり、各サービスによって異なる。
日本語Webフォントには、無料の種類が少ない一方、欧米言語のWebフォントは無料・有料共に種類が豊富にある。
Googleが提供する完全無料のWebフォントサービス。商用利用も無料で導入も比較的簡単にできるため、世界中で利用されている。近年、日本語対応のWebフォントも正式に採用された。
その他にも日本語対応のWEBフォント
利用上の制限がかかることがある
無料フォントの場合、Webフォント提供サービスによって利用規約が異なるが、商用利用ができないもの、ライセンス表記が必要なもの等があり、注意が必要となる。
遅いしちらつきがある？対策は遅延読み込みやダウンロード
Webフォントは確かに読込が増えてしまいますが、日本国内向けのウェブサイトにおけるCore Web Vitals対策であればGoogleフォントの事例ですが使っていてもCWV評価に対してマイナスとなる事はないです。
ただサイトデザイン次第で読み込まれるファイル数によって評価は変わってきますので100%大丈夫という訳ではありません
- 読み込まれるファイル数が増える
- CDN等のネットワーク遅延の影響を受ける
Webフォントを使用しているサイトでCWVが良好か？良好ではないか？は下記サイトを使うと簡単に調べられます。（CrUXデータが揃っているサイト限定なのでアクセス数がある程度ないとデータが揃わず結果を見れないサイトもあります。）
それは下記のTREO SITE SPEED で調べることができます。
WEBフォントでのよりメリットにさせるためには！高速化させるには！
Webフォントには最新のファイルフォーマットを使用する
202年1月現在、Web Open Font Format 2.0（woff2）がWebフォント用の最小かつ最も効率的なファイルフォーマットとなります。
CSSの@font-faceを使用する際は、ttfなどの古くて効率の悪いフォーマットよりも前に、woff2フォントが表示されます。
ブラウザはファイルサイズが大きくても、リスト内で最初に定義されたフォントを使用します。
cssのfont-displayプロパティを使用する
font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示に使用することができるようになります。
chrome49から追加、chrome60では正式採用された’font-display’プロパティを用いることで、ワンライナーでこの問題の対処をすることができます。
これによってユーザーはいち早くテキストを目にすることができるようになります。
フォントの読み込みを調べると、よく目にする略語があります。
- FOIT (Flash of Invisible Text)
- FOIT (Flash of Invisible Text)とは、ブラウザがWebフォントをダウンロードする前にテキストが非表示になる時間のことです。
- FOUT (Flash of Unstyled Text)
- FOUT (Flash of Unstyled Text)とは、ブラウザがWebフォントをダウンロードする前にフォールバックのフォントでテキストがレンダリングされる時間のことです。
Webフォントを使用している場合、ユーザーがWebサイトに初めてアクセスしたときにはいずれかが発生する可能性があります（2回目のページロードではブラウザがキャッシュからフォントを提供できるようになっています）。
上記の@font-faceにfont-displayを加えることで、どちらを使用するかをブラウザに指示できます。
下記のようにfont-faceに対してfont-display: swapを指定することで、適応させることができます。
cssでの指定方法
font-faceに対してfont-display: swapを指定することで、適応させることができます。
@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を読み込んだ上でテキストの表示に使用されます。
それでも早くなければGoogleFontsを自身のサイトから読み込めばよいです。
Google Fonts を自身のサーバーから読み込む
Google Fonts のサイトから、目的のフォントのページを開きます。右上のダウンロードリンクから、フォントファイルが取得できます。
ダウンロードした zip ファイルを解凍し、必要なウェイトのフォントをサーバーにアップロードします。ダウンロードしたファイルは任意の場所に配置すれば良いです。今回は／fontフォルダに格納しました。
font-family でアップロードしたフォントが使えるように、CSS の記述を追記しま
- <style>
- @font-face{
- font-display: swap;
- font-weight: 400;
- font-style: normal
- font-family: ‘Quicksand’;
- src: url(‘/fonts/Quicksand-Regular.ttf’) format(‘ttf’);
- </style>
まとめ
よりwebフォントの使用の場が増えてくると思います。その中でユーザーの体験の質を低下させることを防ぐために、この’font-display’プロパティは大いに役に立つ存在になるはずです。現在はchrome60でしかサポートがされていませんが、対応ブラウザの増加を願ってやみません。
コメント