Web制作ではフォントを活用することは欠かせませんが、その中でも最近脚光を浴びているのがWebフォントです。その名の通り、ネットを介してフォント情報を取得、利用する方法です。便利な一方でデメリットもあるので、うまく使っていくことが求められます。
本記事では、Webフォントの特徴と使い方についてご紹介します。Webフォントのメリットやデメリットについてもご紹介しているので、導入を検討している方の参考になればと思います。
Webフォントの基礎知識
Webフォントとは？
Webフォントとは、CSS3から導入された新しい機能のこと。インターネットを介してフォント情報を読み込み、ページを表示します。従来のインストール型のフォントとは異なり、ユーザー環境に依存しないことが特徴です。ネット環境さえあれば、いつでも意図通りのフォントでページが表示できます。
最近では日本語で使えるWebフォントが増えてきましたし、使えるシーンも増えてきたと言えるでしょう。
Webフォントのメリットとデメリット
Webフォントのメリットとデメリットについてまとめておきましょう。
メリット
Webフォントはこれまでのフォントとは異なり、インストールの必要がありません。ネット環境が整っていれば、必ず意図通りのデザインでフォントが表示されるのです。これが、Webフォントの最大のメリット。ユーザー環境に依存せず、いつでも正しいデザインでページが表示されます。
なお従来は、意図しないフォントで表示されてしまうことを割けるために、画像にテキストを入れる方法もとられてきました。画像を使うことでフォント崩れはなくなるのですが、その分データ量が多くなり、ページの表示に時間がかかってしまう問題がありました。Webフォントを導入することでこういった画像が減らせるため、ページのロード時間の改善も期待できます。さらに画像からテキストに代わることで、SEO面でも有利になります。
デメリット
ページを表示するとき、Webフォントを使っているとフォント情報を読み込むことになります。これが原因で、表示に時間がかかってしまうことも考えられます。ただ通信回線も進歩していますし、Webフォントを適用する場所を絞ることでもページ速度の遅延は防ぐことができます。
Webフォントの使い方
Webフォントの使い方です。Googleフォントを例に、使い方を見ていきましょう。
Googleフォント
Googleフォントをひらき、使用するWebフォントを決めます。「Use」を押して、コレクションに追加してください。フォントのスタイルを選んだのち、「Add this code to your website:」からWebフォントを読み込むためのパスをコピー、CSSファイルにペーストします。
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
HTMLに直接書き込む場合は、下記のようにペーストします。
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
最後に、CSSのfont-familyにWebフォントを指定すれば完了です。
font-family: 'Open Sans', sans-serif;
あとは、Webフォントを適用させたいHTML要素を随時指定していってください。
あとがき
Webフォントも、通常のフォントと同様に著作権は発生しています。利用する時は、著作権の確認も忘れずに行うようにしましょう。