Webフォントとは？導入方法と表示速度への影響
ホームページで、パソコンやスマートフォンに入っていない書体を使いたいときに使うのが「Webフォント」です。
この記事では、Webフォントとは何か、導入する方法と、表示の速さへの影響を解説します。
1.書体を読み込む仕組み
ふつう、ホームページの文字は、見る人の端末に入っている書体で表示されます。そのため、パソコンとスマートフォン、WindowsとMacでは、同じページでも書体が違って見えます。
Webフォントを使うと、書体のデータをインターネットから読み込んで表示するため、どの端末でも同じ書体で表示できます。
| 端末の書体 | Webフォント | |
|---|---|---|
| 見た目 | 端末によって変わる | どの端末でも同じ |
| 表示の速さ | 速い | 書体のデータを読み込む分、遅くなることがある |
| 選べる書体 | 端末に入っているものだけ | 多くの書体から選べる |
2.表示の速さに影響する理由
英語の書体は、使う文字が少ないため、データも小さく済みます。一方、日本語は、ひらがな、カタカナ、漢字と使う文字がとても多いため、書体のデータが大きくなりがちです。
書体のデータが読み込まれるまで、文字が表示されなかったり、読み込み後に書体が切り替わって、ページががたついたりすることがあります。
Webフォントは、見た目をそろえられる一方で、表示の速さに影響することを知っておきましょう。
3.導入方法と、表示を速く保つ工夫
Google Fonts で導入する
Google Fonts では、Noto Sans JP など、日本語の書体も無料で使えます。使いたい書体と太さを選ぶと、ホームページに入れるコードが表示されます。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">body {
font-family: "Noto Sans JP", sans-serif;
}表示を速く保つ工夫
- 使う太さをしぼる（例：400と700だけ）
- 使う書体の数をしぼる（見出しだけWebフォントにする、など）
- display=swap を付け、読み込むまでは端末の書体で文字を表示する
- 読み込みが遅くないか、PageSpeed Insights で確かめる
※Google Fonts は、日本語の書体を、ページで使う文字に合わせて分けて読み込む仕組みになっています。
書体の指定のしかた
font-family には、Webフォントが読み込めなかったときのために、端末の書体（sans-serif など）も続けて書いておきましょう。
4.よくある質問
Webフォントは使わない方がよいですか？
使ってかまいません。ホームページの印象を大切にしたい場合は、使う太さや書体をしぼって、表示の速さとのバランスを取りましょう。
端末の書体だけで、きれいに見せられますか？
今の端末には、読みやすい日本語の書体が入っています。本文は端末の書体、見出しだけWebフォント、という使い方もあります。
Google Fonts は無料ですか？
無料で使える書体が多くあります。書体ごとに使い方の条件（ライセンス）があるため、確かめてから使いましょう。
文字が一瞬、別の書体で表示されます。
display=swap を使うと、読み込むまで端末の書体で表示し、読み込み後に切り替わります。文字が見えない時間を減らすための仕組みです。
5.まとめ
Webフォントは、書体をインターネットから読み込んで、どの端末でも同じ書体で表示する仕組みです。
- 日本語の書体はデータが大きく、表示の速さに影響しやすい
- 使う太さと書体の数をしぼる
- display=swap で、文字が見えない時間を減らす
- PageSpeed Insights で、表示の速さを確かめる
書体の選び方は、Webサイトで読みやすいフォントの選び方で解説しています。
書体の設定や、表示の速さで困っている場合は、浅草Web屋にご相談ください。