WEBフォントを使ってみよう！

最近では一般的なフォントよりも、利便性の高いWEBフォントを利用するサイトが増えてきました。

様々な面で使い勝手が良い反面、利用する際には注意すべきデメリットも存在します。

WEBフォントとは

そもそもWEBフォントとは、あらかじめサーバに格納してあるフォントを利用することで、ユーザーの閲覧環境の影響を受けず表示できる文字のことをさします。サーバからデータを読み込むことで表示する仕組み上、以前は表示に時間がっかることがありましたが、現在では各種対策によりほぼ問題なくスムーズに表示されるようです。

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

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

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

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

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

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

レスポンシブデザインで画像を使用する場合、一つのデザインに対して複数枚の画像を用意する必要があります。

Webフォントで代替できるデザインであれば、HTMLとCSSの記述のみで表示させることができるため、その分の効率化が図れます。

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

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

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

画像を使用する際、変更点があると差し替えといった手間がかかります。

WebフォントであればHTMLとCSSを編集するだけで修正ができるため、メンテナンスが楽というのもメリットの一つです。

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

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

有料のWebフォントを使用する場合は費用が発生します。

ほとんどの場合、Webフォント提供元への一括支払いか、PV数による従量課金に分類されます。

無料で使用できるものでもライセンス表示が必要な場合があります。

特にPV数による従量課金制の場合は、自分のサイトが日にどれぐらいアクセスされているか、しっかりと把握しておかないと、思った以上に費用がかかったり、フォントが表示されなくなることもありますので注意が必要です。

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

日本語の場合、ひらがなやカタカナを使用するため文字数が増えます。

そのためフォントデータが重くなり、ページの表示速度が遅くなってしまうことがあります。

現在はこの点に関してさまざまな改善が行われているため、以前よりは表示速度が改善されているものもあります。

この点を改善する方法として、Webフォント情報がブラウザにキャッシュされるように設定することで、一度見たページと同じフォントを使用すれば読み込み速度を上げる方法があります。また、Webフォントの情報を非同期で読み込ませることで、読み込みが完了するまでの間は代替フォントでページを表示することができます。

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

文字数の多さやデータ量の大きさなどの問題から、欧文に比べて日本語で利用できるWebフォントがまだまだ少ないのが現状です。費用やライセンス表示の件からも選べる幅が少ないのも状況です。