ホームページのフォントを設定するには2つの方法があります。
1つ目は「システムフォント」を使う方法で、もう1つ目は「Webフォント」を使う方法です。
システムフォントもWebフォントもそれぞれメリット・デメリットがあり、時と場合によって使い分けられます。
今回はシステムフォントとWebフォントの違いや両者のメリット・デメリットについてをご紹介していきます。
この記事を読むと分かること
- システムフォントの概要について
- Webフォントの概要について
- 両者の設定方法について
- 両者のメリット・デメリットについて
システムフォントとWebフォントの違い
システムフォントはPCやスマホなどの端末OSにあらかじめインストールされているフォントのことです。閲覧している端末によって用意されているフォントが異なるため、表示させるフォントの形が微妙に異なります。
一方、Webフォントはインターネット上の外部にあるフォントのことです。インターネット上からフォントを読み込む分若干表示速度が遅くなりますが、PCやスマホなどの端末によらずフォントの形が同じになるというメリットがあります。
| メリット | デメリット | |
|---|---|---|
| システムフォントの特徴 |
|
|
| Webフォントの特徴 |
|
|
ここからは、システムフォントとWebフォントの特徴やメリット・デメリットについて詳しく解説していきます。
システムフォントとは？
システムフォントとはOSにインストールされているフォントのことを言います。
MacやWindowsでは標準で搭載されているシステムフォントが異なります。
日本語フォントの場合、Macでは「ヒラギノ角ゴシック体」、Windowsでは「メイリオ」「Yu Gothic UI」などバージョンによって異なるシステムフォントが使用されています。
システムフォントの特徴は下記の通りです。
| メリット | デメリット | |
|---|---|---|
| システムフォントの特徴 |
|
|
システムフォントを設定する方法
システムフォントを設定する方法は簡単で、CSSのfont-familyプロパティの値にフォント名を記述してあげればOKです。
|
1 2 3 |
body{ font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",sans-serif; } |
ただし"Hiragino Kaku Gothic ProN"はMacの標準フォントでWindowsには入っていないので、以下のように代替となるフォントをいくつかまとめて指定しておくのが一般的な書き方になります。
|
1 2 3 |
body{ font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif; } |
こうすることで左側からフォントが参照されていき、ユーザーのデバイスに搭載されているフォントがあればそれが適用されるようになります。
システムフォントを使用するメリット
まずはシステムフォントを使用するメリットについてを具体的に解説していきます。システムフォントを使用するメリットは以下の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フォントを設定する方法は大きく分けて2つの方法があります。
■Webフォントを設定する方法
- Webフォントサービスを使用する方法 (難易度: )
- 自分でフォントファイルをサーバーにアップロードしてCSSで読み込む方法(「セルフホスティング」と言ったりします。) (難易度: )
1. Webフォントサービスを使用する方法 (難易度: )
1つ目の方法は、Webフォントサービスを使用する方法です。
いくつか有名なWebフォントサービスを挙げると、「Google Fonts」や「TypeSquare」、「FONTPLUS」などがあります。
これらのサービスを使うとフォントデータを自分でサーバー上にアップロードする必要がなく、サービス側が生成するコードをサイトの該当箇所にペーストするだけですぐに使うことができる為、比較的簡単にWebフォントを使用することができます。
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フォントを使用するデメリットについてです。デメリットは以下の3点があります。
■Webフォントを使用するデメリット
- 表示速度が遅くなる
- 設定が少し複雑
- Webフォントサービスによっては有料のものもある
デメリット1: 表示速度がシステムフォントよりも遅くなる
2つ目のデメリットは、表示速度が遅くなるという点です。
システムフォントとは違い、Webフォントの場合はサーバーにアップロードされているフォントデータを読み込みにいってからフォントを表示する為、ある程度時間がかかります。
特に日本語フォントの場合は英語フォントと比べて文字数が多いので、ファイルが重くなり、余計に時間がかかってしまう点にも注意が必要です。
デメリット2: 有料ライセンスのものあり著作権に気をつける必要がある
2つ目のデメリットは、Webフォントサービスによっては有料のものもあり、また著作権にも気をつける必要があるという点です。
Webフォントは無料のものもあれば、有料でサービス提供しているもの、無料だが制限付きのものなど、色々な提供形態があります。
商用利用の可否・クレジット表記なども問題ないことを確認しておく必要があります。
レンタルサーバーで利用できるWebフォント
最近では、レンタルサーバーに付加サービスとしてモリサワなどのWebフォントが利用できることもあります。
ホームページやブログなどで利用することも可能ですが、以前某レンタルサーバーに付加サービスとして提供しているWebフォントを利用したアプリを作ってもライセンス的に問題ないか訊ねたところ(Webフォントを埋め込んだpngを生成＆ユーザーがダウンロードできるもの)、「一般的なサイト表示のみの利用を想定しているため難しい」との回答がありました。
このように「サイトでWebフォントを使える」と書いてあっても、特殊な使い方など個々のケースにおいてはNGをいう場合もありますので注意しましょう。
デメリット3: 設定が少し複雑
3つ目のデメリットは、設定が少し複雑であるという点です。
「Google Fonts」などのWebフォントサービスを使用する場合は比較的簡単に設定することができますが、仮に「Google Fonts」などに使用したいフォントがない場合は、自分でサーバーにアップロードして使用する方法(セルフホスティング)を取らなければなりません。
こちらの「セルフホスティング」の方法でWebフォントを設定する場合は、上述したように初心者には少し設定が難しいです。
まとめ
まとめです。今回は、システムフォントとWebフォントの違いや両者のメリット・デメリットについてをご紹介しました。
| メリット | デメリット | |
|---|---|---|
| システムフォントの特徴 |
|
|
| Webフォントの特徴 |
|
|
一般的なブログの場合は表示速度も速いシステムフォントの方で良いと思いますし、美観重視でフォントが全体のイメージを大きく担っているホームページの場合はWebフォントを使用する方が良い場合もあります。
今回は以上になります。最後までご覧頂き、ありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
