ブログ

  1. トップ
  2. ブログ
  3. Webフォントの特徴と使い方

Web制作

Webフォントの特徴と使い方

Web制作ではフォントを活用することは欠かせませんが、その中でも最近脚光を浴びているのがWebフォントです。その名の通り、ネットを介してフォント情報を取得、利用する方法です。便利な一方でデメリットもあるので、うまく使っていくことが求められます。

本記事では、Webフォントの特徴と使い方についてご紹介します。Webフォントのメリットやデメリットについてもご紹介しているので、導入を検討している方の参考になればと思います。

Webフォントの基礎知識

Webフォントとは?

Webフォントとは、CSS3から導入された新しい機能のこと。インターネットを介してフォント情報を読み込み、ページを表示します。従来のインストール型のフォントとは異なり、ユーザー環境に依存しないことが特徴です。ネット環境さえあれば、いつでも意図通りのフォントでページが表示できます。

最近では日本語で使えるWebフォントが増えてきましたし、使えるシーンも増えてきたと言えるでしょう。

Webフォントのメリットとデメリット

Webフォントのメリットとデメリットについてまとめておきましょう。

メリット

Webフォントはこれまでのフォントとは異なり、インストールの必要がありません。ネット環境が整っていれば、必ず意図通りのデザインでフォントが表示されるのです。これが、Webフォントの最大のメリット。ユーザー環境に依存せず、いつでも正しいデザインでページが表示されます。

なお従来は、意図しないフォントで表示されてしまうことを割けるために、画像にテキストを入れる方法もとられてきました。画像を使うことでフォント崩れはなくなるのですが、その分データ量が多くなり、ページの表示に時間がかかってしまう問題がありました。Webフォントを導入することでこういった画像が減らせるため、ページのロード時間の改善も期待できます。さらに画像からテキストに代わることで、SEO面でも有利になります。

デメリット

ページを表示するとき、Webフォントを使っているとフォント情報を読み込むことになります。これが原因で、表示に時間がかかってしまうことも考えられます。ただ通信回線も進歩していますし、Webフォントを適用する場所を絞ることでもページ速度の遅延は防ぐことができます。

Webフォントの使い方

Webフォントの使い方です。Googleフォントを例に、使い方を見ていきましょう。

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フォントも、通常のフォントと同様に著作権は発生しています。利用する時は、著作権の確認も忘れずに行うようにしましょう。