Webフォントとシステムフォントの違いと特徴・メリットデメリット

ホームページのフォントを設定するには2つの方法があります。

1つ目は「システムフォント」を使う方法で、もう1つ目は「Webフォント」を使う方法です。

システムフォントもWebフォントもそれぞれメリット・デメリットがあり、時と場合によって使い分けられます。

今回はシステムフォントとWebフォントの違いや両者のメリット・デメリットについてをご紹介していきます。

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

システムフォントはPCやスマホなどの端末OSにあらかじめインストールされているフォントのことです。閲覧している端末によって用意されているフォントが異なるため、表示させるフォントの形が微妙に異なります。

一方、Webフォントはインターネット上の外部にあるフォントのことです。インターネット上からフォントを読み込む分若干表示速度が遅くなりますが、PCやスマホなどの端末によらずフォントの形が同じになるというメリットがあります。

ここからは、システムフォントとWebフォントの特徴やメリット・デメリットについて詳しく解説していきます。

システムフォントとは？

システムフォントとはOSにインストールされているフォントのことを言います。

MacやWindowsでは標準で搭載されているシステムフォントが異なります。

日本語フォントの場合、Macでは「ヒラギノ角ゴシック体」、Windowsでは「メイリオ」「Yu Gothic UI」などバージョンによって異なるシステムフォントが使用されています。

システムフォントの特徴は下記の通りです。

余談ですが、「ヒラギノ」フォントは高速道路の案内標識や都市の案内サインなどにも使用されているようです。

システムフォントを設定する方法

システムフォントを設定する方法は簡単で、CSSのfont-familyプロパティの値にフォント名を記述してあげればOKです。

ただし"Hiragino Kaku Gothic ProN"はMacの標準フォントでWindowsには入っていないので、以下のように代替となるフォントをいくつかまとめて指定しておくのが一般的な書き方になります。

こうすることで左側からフォントが参照されていき、ユーザーのデバイスに搭載されているフォントがあればそれが適用されるようになります。

システムフォントを使用するメリット

まずはシステムフォントを使用するメリットについてを具体的に解説していきます。システムフォントを使用するメリットは以下の2点です。

メリット①: 設定が簡単

まず1つ目のメリットは、設定が簡単であるという点です。

基本的に、CSSでfont-famiyプロパティを指定するだけで使用できるようになるので、少ない手間で設定が可能です。

また、Webフォントのようにライセンスを気にする必要は基本的にありません（ただし、厳密にはライセンスがないわけではありません）。
 

メリット②: 表示速度が早い

2つ目のメリットは、表示速度が早いという点です。

後ほど紹介するWebフォントでは、まずサーバー上にあるフォントデータを読み込む必要がある為フォントの表示に時間がかかります。

一方、システムフォントの場合はインターネットを介さず、ユーザーのデバイス内にあるフォントを使用して文字を表示する為、読み込みが早くなります。

システムフォントを使用するデメリット

つぎにシステムフォントを使用するデメリットについてご紹介します。

デメリット①: ユーザーの環境によって表示されるフォントが変わってしまう

1つ目のデメリットは、ユーザーの環境によって表示されるフォントが変わってしまうという点です。

先ほども解説しましたが、MacやWindowsなどOSによって標準搭載されているシステムフォントは異なります。

その為、font-familyに「ヒラギノ角ゴ ProN」を指定している場合でも、「ヒラギノ角ゴ ProN」が搭載されていない環境で閲覧しているユーザーの画面には異なる代替フォントが表示されることになります。

また、Android OSは「明朝体系フォント」がインストールされていないため、明朝体系をしていてもゴシック体で表示されます。

フォントがサイトのデザインを大きく左右する場合などは、この点、デメリットと言えるかもしれません。

Webフォントとは？

Webフォントは、サーバー上にアップロードされたフォントデータを読み込み、文字を表示する仕組みのことを言います。

システムフォントでは、「ユーザーの環境によって表示されるフォントが変わってしまう(=フォントの統一化ができない)」というデメリットがありましたが、WebフォントではMac・Windows、iPhone、Androidなどの閲覧端末によらず表示を統一することができます。

その為、ユーザーの環境に依存せず常に同じフォントを表示させることが可能です。
 

Webフォントを使用するメリット・デメリットは下記の通りです。

Webフォントを設定する方法

なおWebフォントを設定する方法は大きく分けて2つの方法があります。

1. Webフォントサービスを使用する方法 (難易度: )

1つ目の方法は、Webフォントサービスを使用する方法です。

いくつか有名なWebフォントサービスを挙げると、「Google Fonts」や「TypeSquare」、「FONTPLUS」などがあります。

これらのサービスを使うとフォントデータを自分でサーバー上にアップロードする必要がなく、サービス側が生成するコードをサイトの該当箇所にペーストするだけですぐに使うことができる為、比較的簡単にWebフォントを使用することができます。

いくつかあるWebフォントサービスの中で、「Google Fonts」が無料で使用でき商用利用も可能なのでおすすめです。

2. 自分でフォントファイルをサーバーにアップロードしてCSSで読み込む方法 (難易度: )

2つ目の方法は、自分でフォントファイルをサーバーにアップロードしてCSSで読み込む方法です。

こちらの方法を「セルフホスティング」と言ったりしますが、こちらはフォントファイルを自ら準備しサーバーにアップロードしなければならないので、初心者にとってはやや難易度が高い設定方法になります。

なお具体的なやり方についてはこちらでは割愛しますが、気になる方は「Webフォント セルフホスティング」のような検索ワードで検索されることをおすすめします。

Webフォントを使用するメリット

まずはWebフォントを使用するメリットについてです。

メリット①: ユーザーの環境に左右されずフォントを統一できる

1つ目のメリットは、ユーザーの環境に左右されずフォントを統一できるという点です。

Webフォントはサーバー上にアップロードされたフォントデータを読み込み文字を表示する為、ユーザーが使用しているデバイスの中にフォントがあるかどうかは関係ありません。

その為、「どうしてもこのウェブサイトにはこのフォントを使用したい」といった場合などには、Webフォントを使用されると良いと思います。

Webフォントを使用するデメリット

つぎにWebフォントを使用するデメリットについてです。デメリットは以下の3点があります。

デメリット1: 表示速度がシステムフォントよりも遅くなる

2つ目のデメリットは、表示速度が遅くなるという点です。

システムフォントとは違い、Webフォントの場合はサーバーにアップロードされているフォントデータを読み込みにいってからフォントを表示する為、ある程度時間がかかります。

特に日本語フォントの場合は英語フォントと比べて文字数が多いので、ファイルが重くなり、余計に時間がかかってしまう点にも注意が必要です。

なお、あらかじめフォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくすること(「サブセット化」と言います。)は可能です。

デメリット2: 有料ライセンスのものあり著作権に気をつける必要がある

2つ目のデメリットは、Webフォントサービスによっては有料のものもあり、また著作権にも気をつける必要があるという点です。

Webフォントは無料のものもあれば、有料でサービス提供しているもの、無料だが制限付きのものなど、色々な提供形態があります。

商用利用の可否・クレジット表記なども問題ないことを確認しておく必要があります。

制作代行でWebフォントを利用する方も、使用範囲・ライセンスを確認した上で導入するようにしましょう。

デメリット3: 設定が少し複雑

3つ目のデメリットは、設定が少し複雑であるという点です。

「Google Fonts」などのWebフォントサービスを使用する場合は比較的簡単に設定することができますが、仮に「Google Fonts」などに使用したいフォントがない場合は、自分でサーバーにアップロードして使用する方法(セルフホスティング)を取らなければなりません。

こちらの「セルフホスティング」の方法でWebフォントを設定する場合は、上述したように初心者には少し設定が難しいです。

まとめ

まとめです。今回は、システムフォントとWebフォントの違いや両者のメリット・デメリットについてをご紹介しました。

一般的なブログの場合は表示速度も速いシステムフォントの方で良いと思いますし、美観重視でフォントが全体のイメージを大きく担っているホームページの場合はWebフォントを使用する方が良い場合もあります。

今回は以上になります。最後までご覧頂き、ありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。