WEB開発を行っていて、
デザインカスタマイズとしてフォントの埋め込みを希望される方が増えてきています。
フォントの埋め込み、つまりWEBフォントを使用することは、
自分の気に入った書体でページテキスト全体の調整を行うことができるので、
洗練されたサイトを目指す方にとっては非常に魅力的なものです。
しかし、WEBフォントにもメリット・デメリットがあります。
ここでは、WEBフォントを使うにあたって、
導入を決める前に知っておいてほしいWEBフォントのメリット・デメリットについて説明していきます。
目次
そもそも、WEBフォントってどういうもの？
まず、フォントには２種類あることを覚えておきましょう。
一つ目は、一般的に広く普及している「明朝体」や「ゴシック体」といった、
パソコンを買った時から自然と使えるフォントです。
二つ目は、インターネット上から好きなフォントを探して、
「フォントファイル」と呼ばれるものをダウンロードし、
自分のパソコンにインストールすることによって初めて使うことができるようになるフォントです。
インターネットを通じてサイトを表示する場合、
自分のパソコン上でしか使えないフォントを使って表示すると、
そのフォントが使えないパソコン上から見たサイトのデザインは崩れてしまいます。
WEBフォントとは、
このようなレイアウト崩れを防ぐ為、
従来パソコンに個別にインストールしていたフォントファイルを自分のサーバー上にアップロードし、インターネットを通じてどのパソコン上からもそのフォントを使用してテキストの表示をできるようにする技術のことです。
WEBフォントを使用するメリット
デザインコンセプトを貫くことができる
まず、一番大きなメリットはデザイン性の高さでしょう。
特に、商品の宣伝などでコンセプトをサイト上でも統一して表現したい時に、WEBフォントは大活躍します。
デフォルトの「明朝体」や「ゴシック体」だけでは表現できる幅に限界がある為、
「スタイリッシュなブランド商品なのに紹介テキストがゴシック体」
といった表現をしていると、
商品の持ち味や魅力がお客さんに伝わらず、
イメージダウンや集客効果が損なわれることになりかねません。
商品ロゴなどで使用しているフォントを埋め込んでサイトで使うことができると、商品からWEBサイトに至る一連のコンテンツのデザインコンセプトを貫き通すことができるのです。
画像化するよりもSEOに強い
WEBサイト上でデザイン性の高いテキストを表示する時、
従来であれば、テキストを画像化して貼り付ける方法がとられてきました。
この場合、画像のaltタグに代替テキストを入れ忘れると、
検索エンジンがテキストを認識できず、SEOに不利に働くことになります。
WEBフォントは、画像ではなくテキストなので、
そういったタグの設定を気にせず、
ただテキストを書き連ねるだけでSEO対策ができます。
色やフォントサイズの調整といったカスタマイズを気軽に行うことができる
サイトを運営していて、
- ちょっとテキストの色味を変えたい
- フォントサイズを変えたい
といった、軽微なカスタマイズの要望は日常的に湧いてきます。
よりサイトを良くするためには必要なことでもあります。
しかし、テキストを画像化している場合には、
全てのテキスト画像の作り直しとなってしまうため、
なかなかカスタマイズに踏み切ることが難しかったりします（時間的にも気力的にも）。
WEBフォントを利用すれば、
CSSを触るだけでサイト上のテキスト全体の色やサイズを一括で調整できるため、カスタマイズを気軽に行うことができるようになります。WEBフォントを使用するデメリット
表示されない可能性
通常ネット上に上がっているフォントでは、以下のようなリスクがあります。
- 対象フォントでの文字が不足しているにもかかわらずサブセット化されていない
- 全ブラウザに対応していない（WOFF・TTF・EOT・SVGのうちいずれかが不足）
オープンソースは技術者でないと作れませんが、
フォントファイルは個人が趣味の範囲で作れてしまうものです。
その為、このような「作りっぱなしでサポートが不十分」なフォントファイルも多数存在しています。
このようなフォントを使った場合、
ブラウザによってはそのフォントファイルが壊れていると判断し、
正しい表示が行われないことがあります。若干のデザインの差異が生じる
フォント自体が正しく表示される場合も、
ブラウザ固有のインデント等の表示デザインフォーマットが異なりますので、ブラウザによっては間延び・詰まったような表示になることもあります。
利用規約が厳しい
日本語対応のウェブフォントの場合、
海外のものよりも利用規約が厳しい傾向にあります。
例えば、
- 商用利用を禁止しているもの
- 商用可能のものでもページ上にライセンス表示が必要なもの
- 商用利用の場合は年額制でお金がかかるもの
という場合があります。
ファイル読み込みによるページ表示遅延
Webフォントはファイルをサーバー上にアップし、
それを読み込む形でユーザーの環境内に存在しないフォントでの表示を実現します。
そのためファイル読み込みがロード時に行われますが、
ファイルのサイズ、読み込みの個数、ユーザーのネット環境によってはページの表示速度に影響が出ます。
WEBフォントを選ぶ時の注意点
以上の通り、WEBフォントにはメリットもデメリットもあります。
WEBフォントを選ぶ際には、
デメリットとしてあげた点をクリアできるフォントかどうかに注意して選ぶようにしましょう。
