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

CSS

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

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

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

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

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

 

この記事を読むと分かること

  • システムフォントの概要について
  • Webフォントの概要について
  • 両者の設定方法について
  • 両者のメリット・デメリットについて

 

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

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

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

システムフォントとWebフォントの違いについてをまとめた図

メリット デメリット
システムフォントの特徴
  • 設定が簡単
  • 表示速度が早い
  • ユーザーの閲覧環境によって表示フォントを完全に統一できない
Webフォントの特徴
  • ユーザーの閲覧環境に左右されずフォントを統一できる
  • 表示速度がシステムフォントよりも遅くなる
  • 有料ライセンスのものあり著作権に気をつける必要がある
  • 設定が少し複雑になる場合がある

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

 

システムフォントとは?

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

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

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

MacやWindowsに標準搭載されているシステムフォント例
 

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

メリット デメリット
システムフォントの特徴
  • 設定が簡単
  • 表示速度が早い
  • ユーザーの環境によって表示されるフォントが変わってしまう

 

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

 

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

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

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

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

Windowsユーザーの場合のfont-familyの適用例

 

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

まずはシステムフォントを使用するメリットについてを具体的に解説していきます。システムフォントを使用するメリットは以下の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フォントの特徴
  • ユーザーの環境に左右されずフォントを統一できる
  • 表示速度が遅い
  • 設定が少し複雑
  • Webフォントサービスによっては有料のものもある

 

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

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

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

  • Webフォントサービスを使用する方法 (難易度: )
  • 自分でフォントファイルをサーバーにアップロードしてCSSで読み込む方法(「セルフホスティング」と言ったりします。) (難易度: )

 

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

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

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

Google Fonts

TypeSquare

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

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

 

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

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

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

■セルフホスティングでWebフォントを使用する流れ

  • (STEP. 1) フォントのライセンスを確認する (必須項目: 商用、再配布、改変の可不可。)
  • (STEP. 2) Webフォント形式のフォントファイルを準備する
  • (STEP. 3) フォントファイルをサーバーにアップロードする
  • (STEP. 4) @font-face規則を指定する

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

 

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

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

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

  • ユーザーの環境に関わらずフォントデザインを統一できる

 

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

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

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

Webフォントの仕組みを表した図

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

 

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

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

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

  • 表示速度が遅くなる
  • 設定が少し複雑
  • Webフォントサービスによっては有料のものもある

 

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

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

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

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

日本語フォントと英語フォントのファイルサイズを比較した図

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

 

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

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

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

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

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

 

レンタルサーバーで利用できるWebフォント

最近では、レンタルサーバーに付加サービスとしてモリサワなどのWebフォントが利用できることもあります。
エックスサーバー モリサワWebフォント
 
ホームページやブログなどで利用することも可能ですが、以前某レンタルサーバーに付加サービスとして提供しているWebフォントを利用したアプリを作ってもライセンス的に問題ないか訊ねたところ(Webフォントを埋め込んだpngを生成&ユーザーがダウンロードできるもの)、「一般的なサイト表示のみの利用を想定しているため難しい」との回答がありました。

このように「サイトでWebフォントを使える」と書いてあっても、特殊な使い方など個々のケースにおいてはNGをいう場合もありますので注意しましょう。

 

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

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

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

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

 

 

まとめ

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

システムフォントとWebフォントの違いについてをまとめた図

メリット デメリット
システムフォントの特徴
  • 設定が簡単
  • 表示速度が早い
  • ユーザーの閲覧環境によって表示フォントを完全に統一できない
Webフォントの特徴
  • ユーザーの閲覧環境に左右されずフォントを統一できる
  • 表示速度がシステムフォントよりも遅くなる
  • 有料ライセンスのものあり著作権に気をつける必要がある
  • 設定が少し複雑になる場合がある

 

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

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

 

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

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

詳細はこちら

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

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

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


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS