近年Web業界でしばしば話題になっている「Webフォント」。
Webフォントとは、どのような仕組みで、従来のフォントとは何が違うのか、気になっている方も多いのではないでしょうか。
今回は、Webフォントの仕組みと、Webサイトを運営するうえでの使い方や設定、そのメリット、デメリットについて紹介します。もくじ
◆Webフォントとは
Webフォントとは、CSS3から採用された、ネットワーク上からフォントを表示する技術になります。
制作サイドで多彩なフォントを使用してデザインしたとしても、ユーザーサイドのPCにフォントのデータが無いと指示通りでない表示がされてしまいます。
この問題の解決手段として策定されたのがWebフォントなります。
フォントのデータをネットワーク上に置くことで、サイト表示の際はそこからフォントデータがダウンロードされ、ユーザーの環境に左右されることなく表示されるようになります。
◆Webフォントの使い方
実際にWebフォントを利用する方法を紹介していきます。
① 使用したいフォントを用意する
欧文フォント、日本語フォント、アイコンフォントなど数多くのフォントの中から利用したいフォントを選択します。
② CSS3の@font-faceでフォントファイルを指定する
CSS3から追加された@font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。
③ CSSでフォントを適応させる
Webフォントを利用したい箇所にCSSを適応させます。
以上の手順でWebフォントが表示されるようになります。
◆Webフォントを使うメリットとデメリット
前述のように簡単に利用できるWebフォントですが、メリットだけではなくデメリットもあります。
実装する際の参考としてまとめた内容を紹介します。
メリットとして
・テキストデータであるためSEOに有利
画像ではなくデザイン性を保った状態でテキストデータとして利用できるのでSEO対策として有利になります。
・ユーザビリティが向上
画像の文字はコピーすることが不可能ですが、Webフォントは選択することが出来るので、コピーして再利用することが可能になります。
・メンテナンス性の向上
HTMLやCSSを編集するだけで加筆、修正が可能になります。
・主要ブラウザがWebフォントをサポート済
新しい技術ですが、なんとIE6もサポート済みです。
その他モダンブラウザは当然のこと、スマートフォンやタブレット端末でのサポートもされています。
デメリットとして
・日本語対応のWebフォントが少ない
漢字、ひらがな、カタカナとローマ字に比べて種類が多く、その文字数の多さやデータ量の大きさがネックとなり対応が遅れています。
・ブラウザによって若干の差異が生じる
サポート自体されてはいるものの、各ブラウザによって文字のインデントなどが違うため、若干の差異が生じてしまいます。
・読み込みに時間がかかる
バイト数の大きいWebフォントの場合、読み込むまでの間は各ブラウザのデフォルトのフォントが表示されてしまうなどの問題があります。
また、ページ表示自体も遅くなることからユーザーのストレスになる可能性があります。
◆まとめ
使用するフォントによってWebサイト全体の印象が決まると言っても過言ではありません。
メリット、デメリットを理解し効果的に使用することをおすすめいたします。