YUIDEAデザイナーの山口です。

WEBデザイナーなら誰しもが直面するデバイスフォントとWEBフォントの使い分け。この記事では、それぞれのフォントの概要からメリットデメリット、使い分けまで詳しく説明していきます。

「デバイスフォント」「WEBフォント」とは？

それぞれのフォントについて詳しく説明していきます。

1.デバイスフォント

デバイスフォントとは、WindowsやMac、Iphoneなど、各端末（デバイス）にダウンロードされているフォントのことです。
各端末には、Macの「ヒラギノ角ゴシック」や、Windowsの「メイリオ」のように最初から標準搭載されているフォントがあります。

下記の記事に各端末の標準搭載フォントが記載されておりました。

各端末に標準搭載されていないフォントについては、FONT PLUSやモリサワパスポート等のフォントサービスで自身の端末にダウンロードすることでサイトに表示することが可能になります。

デバイスフォントは、見ている端末で表示されるフォントが異なるので注意

デバイスフォントには厄介な点があり、自身の端末にダウンロードされていないフォントは、CSSのfont-familyに指定されていても表示されません。
例えば、CSSに下記のようなfont-familyを指定したとします。（font-family内に書かれているフォントは全てデバイスフォントです。）

自身の端末に「ヒラギノ角ゴシック」がない場合は、その次に記載されている「游ゴシック」でサイトに表示されます。更に「游ゴシック」もない場合は「メイリオ」で表示されます。
つまり、「ヒラギノ角ゴシック」が端末にある人は「ヒラギノ角ゴシック」で表示されて、ない人は「游ゴシック」か「メイリオ」で表示されるので、端末によって表示されるフォントが異なってしまうのです。

紙媒体中心でデザインをしてきた人からしてみたら、見ている人によってフォントが異なるなんて言語道断！！！と思う方もいるでしょう。
そんな方のためにあるのが次に説明する「WEBフォント」です。

2.WEBフォント

WEBフォントは、WEBサーバーやクラウド、ネット上で提供されているフォントを各デバイスに読み込ませて表示させるフォントです。
デバイスフォントと異なり、サーバーやネット上から読み込んで表示するため、OSや端末、バーションの違いに関わらず同じフォントで文字を表示することができます。

WEBフォントを導入する方法は大きく分けて2つあります。

①WEBのフォントサービスを利用する

Google Fonts やTypeSquare( モリサワフォント) 、Adobe FontsのようなWEBフォントサービスが該当します。使用したいフォントのソースコードを各サービスから持ってきてCSSに入力するだけでブラウザでの表示が可能です。

しかし各サービスによってライセンスが異なるので要確認です。
取引先のサイトでフォントを使いたい場合は取引先にフォントを購入して頂く必要があったり、サイトのPV数によって契約の金額が異ったりとサービスによって決まりが様々です。

そんな各サービスの中で私のオススメは、ライセンス周りがクリアで全てのフォントが無料で配布されている「Google Fonts」です。なにを使えば良いか困ったらGoogle Fontsを使用しましょう。

②自分でサーバーにフォントファイルをアップロードする

自作のフォントをサイトで使用したいときや、フォントのサブセット化をしたいときにこの方法を使用します。
※フォントのサブセット化については下記サイトで分かりやすく説明されておりましたのでこちらをご参照ください。

自分でサーバーにフォントファイルをアップロードすることを「セルフホスティング」と呼びます。セルフホスティングは各フォントサービスで許可されていない場合がほとんどなので注意しておこなってください。

デバイスフォントとWEBフォントのメリット・デメリット

ここまで「デバイスフォント」と「WEBフォント」について長々と話してきましたが、全てのデバイスで同じ表示ができるなら「WEBフォント」を使えばよいのではと思ったと思います。
見栄えだけを優先すればそうなのですが、「デバイスフォント」と「WEBフォント」には一長一短ありますので、場面によって使い分けが必要です。

見て頂くとわかる通りデバイスフォントとWEBフォントのメリット・デメリットは互いに相反しているため、使い分けがしやすいです。
例えば、デバイスフォントであれば、コーポレートサイトやECサイト等のページの表示スピードを重視するサイト。
WEBフォントであれば、ブランドサイトやLP等の見た目を重視するサイト。のように使い分けても良いかもしれません。

ちなみに、WEBフォントでも「サブセット化」や「非同期読み込み」をすることで、表示スピードに関してストレスなくフォントを読み込ませることも可能なので下の方のブログを参考に試してみてください！

◆サブセット化

◆非同期読み込み

まとめ

デバイスフォントとWEBフォントについて理解して頂けましたでしょうか。何度もお伝えしている通り、デバイスフォントとWEBフォントは場面によって使い分けが必要です。それぞれフォントの特性をよく理解して自分にあったフォントの使い分けを見つけていきましょう！