デバイスフォントとWEBフォントの使い分けについて
YUIDEAデザイナーの山口です。
WEBデザイナーなら誰しもが直面するデバイスフォントとWEBフォントの使い分け。この記事では、それぞれのフォントの概要からメリットデメリット、使い分けまで詳しく説明していきます。
「デバイスフォント」「WEBフォント」とは？
それぞれのフォントについて詳しく説明していきます。
1.デバイスフォント
デバイスフォントとは、WindowsやMac、Iphoneなど、各端末（デバイス）にダウンロードされているフォントのことです。
各端末には、Macの「ヒラギノ角ゴシック」や、Windowsの「メイリオ」のように最初から標準搭載されているフォントがあります。
標準搭載フォント代表例
◆macOS Catalina (10.15)
ヒラギノ角ゴシック、ヒラギノ丸ゴProN、ヒラギノ明朝ProN、游ゴシック体、游明朝体
◆Windows 10 (1809)
メイリオ、游ゴシック、游明朝体、UDデジタル教科書体、MSPゴシック、MSP明朝
下記の記事に各端末の標準搭載フォントが記載されておりました。
各端末に標準搭載されていないフォントについては、FONT PLUSやモリサワパスポート等のフォントサービスで自身の端末にダウンロードすることでサイトに表示することが可能になります。
デバイスフォントは、見ている端末で表示されるフォントが異なるので注意
デバイスフォントには厄介な点があり、自身の端末にダウンロードされていないフォントは、CSSのfont-familyに指定されていても表示されません。
例えば、CSSに下記のようなfont-familyを指定したとします。（font-family内に書かれているフォントは全てデバイスフォントです。）
font-family:
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif
自身の端末に「ヒラギノ角ゴシック」がない場合は、その次に記載されている「游ゴシック」でサイトに表示されます。更に「游ゴシック」もない場合は「メイリオ」で表示されます。
つまり、「ヒラギノ角ゴシック」が端末にある人は「ヒラギノ角ゴシック」で表示されて、ない人は「游ゴシック」か「メイリオ」で表示されるので、端末によって表示されるフォントが異なってしまうのです。
紙媒体中心でデザインをしてきた人からしてみたら、見ている人によってフォントが異なるなんて言語道断！！！と思う方もいるでしょう。
そんな方のためにあるのが次に説明する「WEBフォント」です。
2.WEBフォント
WEBフォントは、WEBサーバーやクラウド、ネット上で提供されているフォントを各デバイスに読み込ませて表示させるフォントです。
デバイスフォントと異なり、サーバーやネット上から読み込んで表示するため、OSや端末、バーションの違いに関わらず同じフォントで文字を表示することができます。
WEBフォントを導入する方法は大きく分けて2つあります。
①WEBフォントサービスを利用する
②自分でサーバーにフォントファイルをアップロードする
①WEBのフォントサービスを利用する
Google Fonts やTypeSquare( モリサワフォント) 、Adobe FontsのようなWEBフォントサービスが該当します。使用したいフォントのソースコードを各サービスから持ってきてCSSに入力するだけでブラウザでの表示が可能です。
しかし各サービスによってライセンスが異なるので要確認です。
取引先のサイトでフォントを使いたい場合は取引先にフォントを購入して頂く必要があったり、サイトのPV数によって契約の金額が異ったりとサービスによって決まりが様々です。
そんな各サービスの中で私のオススメは、ライセンス周りがクリアで全てのフォントが無料で配布されている「Google Fonts」です。なにを使えば良いか困ったらGoogle Fontsを使用しましょう。
Google Fontsがおすすめな理由
・全てのフォントが無料で配布されている。
・アカウントの登録が必要ないので契約更新等の必要もなし。
・他のサービスに比べて比較的容量が軽い。
②自分でサーバーにフォントファイルをアップロードする
自作のフォントをサイトで使用したいときや、フォントのサブセット化をしたいときにこの方法を使用します。
※フォントのサブセット化については下記サイトで分かりやすく説明されておりましたのでこちらをご参照ください。
自分でサーバーにフォントファイルをアップロードすることを「セルフホスティング」と呼びます。セルフホスティングは各フォントサービスで許可されていない場合がほとんどなので注意しておこなってください。
セルフホスティングが許可されていないケースが多い理由
再配布の可否 … フォントファイルをサーバにアップロードすると、インターネット上にフォントを公開している状態と変わらないので「再配布」にあたる可能性がある
改変の可否 … ダウンロードしたフォントファイルの拡張子が「.ttf」や「.otf」だった場合、Web フォント用のファイル形式であるwoff ファイル等に変換をする必要があり、この行為が「改変」にあたる可能性がある
デバイスフォントとWEBフォントのメリット・デメリット
ここまで「デバイスフォント」と「WEBフォント」について長々と話してきましたが、全てのデバイスで同じ表示ができるなら「WEBフォント」を使えばよいのではと思ったと思います。
見栄えだけを優先すればそうなのですが、「デバイスフォント」と「WEBフォント」には一長一短ありますので、場面によって使い分けが必要です。
デバイスフォント
⭕メリット
・容量が軽いためページの表示スピードが速い。
・デバイスに入っているフォントのため、ライセンスを気にしなくて良い。
❌デメリット
・ユーザー側の閲覧環境に左右されるため、表示されるフォントを統一できない。
WEBフォント
⭕メリット
・ユーザー側の閲覧環境に左右されることなくどの端末でも共通のフォントを表示できる。
❌デメリット
・容量が重いためページの表示スピードが遅い。
・使用したいフォントの各サービスによってライセンスの規定あり。
見て頂くとわかる通りデバイスフォントとWEBフォントのメリット・デメリットは互いに相反しているため、使い分けがしやすいです。
例えば、デバイスフォントであれば、コーポレートサイトやECサイト等のページの表示スピードを重視するサイト。
WEBフォントであれば、ブランドサイトやLP等の見た目を重視するサイト。のように使い分けても良いかもしれません。
ちなみに、WEBフォントでも「サブセット化」や「非同期読み込み」をすることで、表示スピードに関してストレスなくフォントを読み込ませることも可能なので下の方のブログを参考に試してみてください！
◆サブセット化
◆非同期読み込み
まとめ
デバイスフォントとWEBフォントについて理解して頂けましたでしょうか。何度もお伝えしている通り、デバイスフォントとWEBフォントは場面によって使い分けが必要です。それぞれフォントの特性をよく理解して自分にあったフォントの使い分けを見つけていきましょう！