一般的なフォントよりも利便性の高いWebフォントを採用するホームページが徐々に増えています。
非常に使い勝手が良い反面、もちろんデメリットもいくつか存在しています。

今回は、Webフォント使用時のメリットとデメリットのご紹介と、Webフォントを利用しているホームページの事例をご紹介します。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
有名企業・ブランドのロゴで採用されているフォント15選
神は細部に宿る！文字組みの基礎ルールは覚えておこう

Webフォントとは

Webフォントとは、あらかじめサーバに格納してあるフォントを利用することで、ユーザーの閲覧環境の影響を受けずに表示される文字です。
詳しくは以下の記事をご参照ください。
意外と簡単！Webフォントについて知っておくべきことを解説｜ferret

Webフォントを利用するメリット

どのデバイスでも同一に表示できる

Webフォントはサーバから情報を取得するので、ユーザーの閲覧環境に左右されず、誰が見ても統一されたデザインで閲覧できます。

画像の枚数が減るため、ページのデータ量を小さくできる

画像で表示していたテキストをWebフォントに変更すれば画像の枚数を削減することができるため、ページのデータ量を小さくすることができます。

レスポシブデザインに対応しやすい

レスポンシブデザインで画像を使用する場合、一つのデザインに対して複数枚の画像を用意する必要があります。
Webフォントで代替できるデザインであれば、HTMLとCSSの記述のみで表示させることができるため、その分の効率化が図れます。

ベクター形式で表示される

一般的な画像は「ラスタ形式」であることからも拡大表示したり高解像度ディスプレイで表示すると崩れてしまいます。
対して、Webフォントは「ベクター形式」で表示するため、劣化させずに表示できます。

「ラスタ形式」「ベクター形式」についてわからないという方は、以下の記事を参照してみましょう。
ノンデザイナーでも知っておきたい！ベクタ形式とラスタ形式の違いを解説｜ferret [フェレット]

メンテナンスに手間がいらない

画像を使用する際、変更点があると差し替えといった手間がかかります。
WebフォントであればHTMLとCSSを編集するだけで修正ができるため、メンテナンスが楽というのもメリットの一つです。

Webフォントを利用するデメリット

費用が発生する場合がある

有料のWebフォントを使用する場合は費用が発生します。
ほとんどの場合、Webフォント提供元への一括支払いか、PV数による従量課金に分類されます。

無料で使用できるものでもライセンス表示が必要な場合がありますので、使用時は注意しましょう。

データが重く、ページの表示速度が遅くなる場合がある

日本語の場合、ひらがなやカタカナを使用するため文字数が増えます。
そのためフォントデータが重くなり、ページの表示速度が遅くなってしまうことがあります。
現在はこの点に関してさまざまな改善が行われているため、以前よりは表示速度が改善されているものもあります。
しかし表示速度が遅い、と感じる場合は、解決方法として以下の2つがあげられます。

キャッシュを利用する

Webフォント情報がブラウザにキャッシュされるように設定しておけば、一度見たページと同じWebフォントを使用しているページであれば読み込み速度を上げることができます。

非同期でWebフォントを読み込ませる

Webフォントの情報を読み込んでいる間にページが空白になってしまう現象が起こる場合があります。
Webフォントの情報を非同期で読み込ませることで、読み込みが完了するまでの間は代替フォントでページを表示することができます。

日本語対応のWebフォントが少ない

文字数の多さやデータ量の大きさなどの問題から、欧文に比べて日本語で利用できるWebフォントがまだまだ少ないのが現状です。
ferret内の以下のページで日本語に対応しているWebフォントを提供しているホームページを紹介していますので、ぜひ参考にしてみてください。
【保存版】和文のWebフォントサイト35選｜ferret [フェレット]