WEBフォントの使い方とシステムフォントとの違いをご紹介

普段から使用しているパソコンとは違うデバイスでWEBサイトを見た時、文字がいつも見ていた表示とは違っているといった経験はありませんか？
私たちが見ているWEBサイトは「WEBフォント」と「システムフォント」と呼ばれる、大きく分けて2つの場所からフォントを読み込ませて表示させています。

今回はこのWEBフォントとシステムフォントにについての使い方をご紹介していきたいと思います。

WEBフォントとは

WEBフォントとは予めサーバーにアップロードしたフォントをWEBサイトで読み込んで表示させる仕組みです。
WEBフォントに使用されるフォントファイルの拡張子は、woffやwoff2などがあります。
このWEBフォントを使用すると、どのデバイスでも同じ表示になるのが特徴です。

また、WEBフォントは現在Google Fontsなどで多くのWEBフォントが無料で提供されていています。

システムフォントとは

一方システムフォントとは予めパソコンにインストールされているフォントの事で、OSや各デバイスによって読み込まれるフォントが違います。
システムフォントなどに使用されるフォントファイルの拡張子は、ttfやeotなどがあります。
例えばWindowsとMacではインストールサれているフォントが違うため、同じWEBページでもテキストの表示が変わります。
ただし、読み込みには時間がかからず表示スピードは早くなります。

WEBフォントを使うメリット

WEBフォントを使うメリットは、先述の通りWEBサイトのテキスト表示がOSやデバイスで左右されないため、同じデザインで表示が可能です。
共通のフォントでデザインが統一される事は使い勝手の面でも良いでしょう。

WEBフォントを使うデメリット

WEBフォントはデザインがOSに左右されない面を持つ一方で、読み込むフォント自体の数が多かったり特に日本語WEBフォントのようにサイズが大きいと読み込みに時間がかかり、表示が遅れ安定がしないの面もあります。
また、一部のフォントではフォントサイズやブラウザの種類によってはフォントにシャギー(ギザギザ)が入り、かえって見栄えが悪くなる可能性もあります。

もし、WEBフォントを使用してブラウザに表示した時にシャギー(ギザギザ)が入ってしまった場合は、以下のリンク先のページで、その対処法もご紹介しています。

関連記事：WEBフォントでシャギー(ギザギザ)が入ってしまう時の対処法

フォントの呼び出し方

WEBサイトにフォントを指定する時は、CSSを使って使用したいフォントを指定します。
また、WEBフォントを呼び出す時とシステムフォントを呼び出す時は、それぞれ以下のようになります。

WEBフォントを使用する場合

WEBフォントでGooglefontのようなCDNを使用する場合は、以下のように編集をします。

CNDを利用してWEBフォントを読み込ませる方法

linkタグをコピーしてheadタグに入れます。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

CSSのフォントファミリーをCSSファイルにコピペする

wf{
  font-family: 'Noto Sans JP', sans-serif;
}

CNDを利用せず、自前のサーバーにWEBフォントをアップロードして読み込ませる場合は以下のように設定します。

WEBフォントをサーバーにアップロードして読み込ませる方法

まずは、WEBフォントとして使用ができるように拡張子を変更します。
CSSを以下のように記述して、でWEBフォントとして呼び出します。

@font-face{
  font-family: "フォント名";
  src: local("ローカルふぉんtネーム"),
  url("assets/fonts/フォント名.woff2") format("woff2"),
  url("assets/fonts/フォント名.woff") format("woff");
  font-weight: 400;
}
　
.wf{
  font-family: "フォント名";
}

システムフォントを使用する場合

システムフォントを呼び出す場合は、CSSのみを編集します。
また、呼び出すフォントは複数のOSで見られる事を想定して指定すると、表示の差を軽減できますので、考慮して指定しましょう。

html{
  font-family:　ここに指定したいフォント名を入れます;
}

まとめ

WEBフォントについて、システムフォントとの違いや使い方についてご紹介いたしましたが、いかがだったでしょうか？
デザインがOSやに左右されない事は大事です。そして、システムフォントでは使用出来なかったフォントが現在では多くWEBフォントに登場しているので、
今まで画像として処理をしていた部分をテキストで表現でき、テキストを使用するという事はSEOの面で有利に働く場合もあります。
是非、ご参考になれば幸いです。