システムフォントとWebフォントの違いとは？

ホームページ上で使用されているフォントですが、いろいろな種類があることはお気付きでしょうか？
以前、通常テキスト（HTML上で直接書かれている文字）と画像テキスト（photoshopなどで作成・加工し、画像として載せている文字）についてはご紹介しました。通常テキストと画像のテキストを使い分けよう

その中で、今回は通常テキストついての説明になります。
通常テキストは、CSSのfont-familyによって「システムフォント」と「Webフォント」の2種類を設定することができます。
今回はそれぞれの概要と、Webフォントの導入方法についてご紹介します。

システムフォントとは？

システムフォントは、OSにインストールされているフォントを指します。
このシステムフォントですが、MacとWindowsでは標準となるフォントが異なります。
またWindowsの中でも「メイリオ」や「YuGothic UI」など、標準となるフォントはバージョンによって何度も変更されてきました。

ところで、フォントを設定する際には以下のようなCSSを書くと思います。

font-familyでは左から順にフォントを参照し、合致するフォントがあればそれをホームページ上に適用します。
‘Hiragino Kaku Gothic ProN’はMacの標準フォントですが、Windowsには標準では入っていないフォントになります。
そのため、Windowsではそれらより後に記載されているMeiryoが適用されます。
Meiryoも入っていないような古いバージョンでは、総称フォント（sans-serif）でゴシック系のフォントが選ばれるような仕組みになっています。

ここで一つ問題があります。
フォントは種類によって形や大きさが違うため、同じ文章であっても1行の中に記載できる文字数は異なります。
このブログ記事のようなブロック単位の文章であれば、行数が増えるだけで影響は少ないと思いますが、「必ず1行に収めたい」ようなデザイン性の高いパーツがあった場合はどうなるでしょうか。
フォントによっては折り返されて2行になってしまい、そうなると当然デザインが崩れてしまいます。
ここが、システムフォントを採用する際の弱点となります。

Webフォントの登場

先程のシステムフォントの弱点を補うことができるのがWebフォントです。
Webフォントは、ページを読み込む際にネットワーク上にあるフォントを呼び出して表示します。
システムフォントのようにOSで管理されているフォントではないため、閲覧者がどのOS、バージョンを使用していても、制作側が指定したフォントを表示することができます。

Webフォントの種類

Webフォントは有料のフォントと無料のフォントがあります。
有料フォントではモリサワのフォントを使用できる「TypeSquare」がおすすめです。
無料フォントはGoogle Fontが一番有名です。今回はこのGoogle Fontの使い方についてご紹介します。

Google FontでWebフォントを導入する

今回はNoto Sans JPを入れてみましょう。
検索で出てきたNoto Sans JPのカードをクリックすると、詳細ページに飛びます。

Thin(100)～Black(900)の中から、使用する太さを選んで「＋Select this style」をクリックします。
今回はRegular400とBold700を追加します。

ページ右端にメニューが出ました。
Use on the webから、linkタグか@importを選んで記述をコピーします。
linkタグはHTMLのheadタグ内、@importはCSS内に記述してフォントを呼び出すことができます。
後は「CSS rules to specify families 」の下にあるfont-familyをCSSに記述することで、Noto Sans JPを設定することができます。

Webフォントのデメリット

Webフォントはページを読み込む際にフォントを呼び出すため、表示が遅いというデメリットがあります。
そのため、使用しないフォントやフォントの太さは記述しないようにしましょう。
また、崩れが出ないように対応した上でシステムフォントを使用するのも一つの手です。

まとめ

Webフォントの使用はデメリットもありますが、おしゃれな英字フォントも多いので、ポイントを絞って使用するのもありでしょう。
画像フォントと違ってSEO的には通常テキストと同じなので、必要に応じて導入してみてください。