デバイスフォントとは?メリット・デメリットや一覧をご紹介!

デバイスフォントとは?メリット・デメリットや一覧をご紹介!

WEBフォントという言葉は耳にしたことはあっても、デバイスフォントは耳にしたことがない方もいるでしょう。デバイスフォントは誰も編み直に使っているフォントで様々なメリットがあります。今回はデバイスフォントについて詳しく紹介しています。


目次[非表示]

  1. デバイスフォントとは?
  2. WEBフォントとは?
  3. デバイスフォントのメリット・デメリット
  4. デバイスフォントの使い方
  5. デバイスフォントの一覧
  6. WEBページでフォントを確認する方法
  7. まとめ

ウェブサイトに表示するテキストの書体を決めるフォントがあります。

ですが一概にフォントといっても大きく分けて2種類あり、

  • デバイスフォント
  • WEBフォント

の2つが存在します。

ほとんどのサイトではデバイスフォントと言われるフォントが使われていて、日本のサイトでは「Arial・sans serif・メイリオ・Roboto」などのフォントがよく採用されています。

例えばGoogle検索ページではArialとsans-serifが使われていて、英数字はarial・日本語など全角文字はsans-serifが使用されています。

ヤフートップページなら「メイリオ」で統一というように、WEBフォントが使われている例はほとんどありません。

今回はデバイスフォントとは具体的にどのようなフォントなのか、デバイスフォントを利用するメリット・デメリットを紹介していきます。

デバイスフォントとは?

デバイスフォントとは、簡単に言うとブラウザを動作させているデバイス(Windowsなど)にはじめからインストールされているフォントのことを言います。

使用するデバイスによって標準フォントが異なり、Windows端末では「メイリオ」が標準フォントとなっています。Macではヒラギノ角ゴシックが標準フォントとして設定されています。

WEBサイト側が指定するフォントに対応できなかった場合は自動的に標準設定されているデバイスフォントが使われるようになっています。

WEBフォントとは?

WEBフォントとはデバイスに初めからインストールされていないフォントで、利用するためには随時ダウンロードさせる必要があります。

デバイスフォントと比べてユニークなフォントが多く、個性的な表現が可能です。

ただし、必ずWEBフォントデータのダウンロードが必要となるため通信量が増加するほか、Web ページの読み込み速度も遅くなるデメリットが存在するため、サイトデザインを考える際はWEBフォントにかかるコストも考慮する必要があります。

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

デバイスフォントはWEBフォントにはないメリットやデメリットが存在します。

続いてはそれらメリット・デメリットについて見ていきましょう。

メリット

端末ごとの互換性を気にせずにWEBサイトを制作できる

ブラウザはデバイスにインストールされているデバイスフォントを使ってテキストを表示するため、わざわざサイト運営者がフォントファイルを用意する必要がありません。

フォント選択をデバイスに任せるようにすれば、コンテンツの制作のみに注力できます。

WEBフォントの読み込みに失敗してもテキストを表示できる

何らかの理由でWEBフォントのダウンロードが失敗してしまうこともあるでしょう。

そういう場合は自動的にデバイスフォントが使用されるため文字化けを起こしたり、テキスト部分が真っ白になることはありません。

テキスト表示で使用されるフォントこそ意図していないものだったとしても、文章が全く見えなくなるということはないため安心です。

WEBページの高速表示ができる

WEBフォントは1つあたり数MBあることが一般的であり、ページの読み込み速度にも影響します。

ですがデバイスフォントであればそれらフォントファイルのダウンロードが一切発生せず、WEBフォントを使った場合と比較してページの高速読み込みが可能です

特に日本語対応WEBフォントだとかなり容量が大きく、数十MBあることもよくあります。

速度制限にかかっているユーザーだと、WEBフォントのダウンロードのせいでページの読み込みに長時間かかってしまうというケースも少なくありません。

ですのでユーザーのことを考えるのであれば、WEBフォントではなくデバイスフォントのほうを使うようにしましょう。

Page Speed Insightでスコアが下がらない

WEBフォントを使用する場合、読み込みの非同期化などを行わないとPage Speed Insightのスコアが急激に低下します。

Page Speed Insightが低いとページの読み込み速度も遅くなる傾向があるので、気になる方はデバイスフォントを使うようにしましょう。

デメリット

デバイスによってデバイスフォントが異なる

デバイスフォントは全デバイスで統一されてるのではないかと思うかもしれませんが、そういうわけではありません。

例えばWindowsなら標準のデバイスフォントが「メイリオ」で、Macの場合は「ヒラギノ角ゴシック」です。

大きな差こそないものの、わずかにテキスト表示に差異があるので、完璧に統一したい場合はWindows・Macどちらでも使用できる「游ゴシック」をCSSで指定するようにしましょう。

日本語対応フォントが少ない

デバイスフォントのほとんどは日本語非対応です。

非常によく使われる「sans-serif」など、日本語に対応したデバイス本当はあまり多くありません。

日本語に対応したデバイスフォントは、Windows の場合だと以下のものが一般的です。

  • メイリオ
  • MS UI Gothic
  • Meiryo UI
  • 游ゴシック
  • Roboto
 

ですがWEBフォントだと非常に多くの日本語対応フォントがあるため、ほかのサイトと差別化したいという場合にはWEBフォントを使うべきでしょう。

ユニークなフォントが少ない

デバイスフォントは読みやすくどこでも使える一般的なフォントに限定されているため、ユニークなフォントがほとんどなく、日本語対応フォントに至っては一つもありません。

WEBフォントなら手書き風のフォントや切り絵風のフォント

ですが、WEBフォントなら手書き風のフォントや切り絵風のフォントなど、実にユニークなフォントがたくさん揃っています。

出典: http://www2s.biglobe.ne.jp/~fub/font/kirieji.html

また、WEBフォントの場合は、FontAwesomeやIcomoonなどを使うことでTwitterアイコンなどのアイコンフォントも使えます。

デバイスフォントだけでは力不足な場面でWEBフォントを使うようにしましょう。

デバイスフォントの使い方

WEBページ側で使用するデバイスフォントを指定する場合は「fant-family」プロパティを使用します。

フォントを指定する際は、フォントを変更したい要素に対してid・classなりを指定してCSSでデザインを加工してください。

基本的にはこのように指定します。その他フォントサイズや太字などの文字装飾は別途指定するようにしましょう。

複数フォント指定したい

作成フォント指定したい場合は半角のカンマ「,」で区切ります。

一番最初に記載したフォントから優先的に使用されるので、一番利用したいフォントを一番最初に指定するようにしましょう。

例えば上記サンプルだと「メイリオ」が使えるかどうか検証され、使えたらメイリオでテキスト表示。出来ない場合は次の「ヒラギノ角ゴシック」が使えるかどうかチェックするというようになっています。

半角スペースを含むフォント名を指定する方法

フォントの中には「Yu Gothic」など半角スペースを含む名前のフォントが存在します。

この場合はダブルクォーテーション「"」かシングルクォーテーション「\"」でフォント名を囲います。

半角スペースなしでも自動的に対応してくれることもありますが、基本的になクォーテーションでフォント名を囲うのがルールですので守るようにしましょう。

最後に「sans-serif」を設定する必要はない

font-familyプロパティを設定する際は最後に「sans-serif」を指定するという通説がありますが、これは必須ではありません。

最新のブラウザは、WEBサイト側が指定するデバイスフォントのいずれにも対応しなかった場合は自動的に使えるフォントで代替されるのでわざわざ指定する必要がないのです。

絶対に指定する必要がないというわけではありませんが、絶対に指定しなければならない理由もないので覚えておきましょう。

デバイスフォントの一覧

続いてはWindows・Mac・スマホに搭載されている一般的なデバイスフォントについて紹介します。

Windows・Mac・スマホによってデバイスフォントが異なるので、font-familyプロパティでデバイスフォントを指定する際は参考にしてみてください。

Windows

などなど50種類以上

Mac

などなど80種類以上

iPhone

などなど40種類以上

Android

Androidは機種によってデバイスフォントが異なります。

そのため一概に〇〇対応とはわかりませんので、気になる方は各Androidごとに選べるようにしましょう。

Windows・Mac・iPhone共通デバイスフォント

全ての主要端末において指定するデバイスフォントを統一したい場合は、以下のデバイスフォントを使用してください。

 

WEBページでフォントを確認する方法

最後にWEBページでかんたんにフォントの確認をする方法を紹介します。

完全に自力で確認しようと思うと、ブラウザごとに搭載されているデベロッパーツールを使ってCSSプロパティを解析する必要がありますが、「WhatFont」というChrome拡張機能を使うことで簡単にフォントの確認が行えます。

まずはchromeウェブストアでWhatFontをインストールしましょう。

WhatFont - Chrome Web Store

インストールが終わったら、フォントを調べたいページでWhatFontアイコンをクリックします。

クリックすると[Exit WhatFont]というボタンが表示されます。

この状態でフォントを調べたいテキストにカーソルを合わせてみてください。

カーソルを合わせるだけで、フォントの確認が行なえます。

Chrome拡張があればどのサイトも簡単にチェックできるので、ほかサイトの分析でフォントの確認も行いたい場合はインストールしておくといいでしょう。

まとめ

メイリオやArialといったデバイスフォントについて紹介いたしました。

WEBページを閲覧する側にとってはあまり意識する必要のない問題ですが、WEBサイトを運営する側にとっては気になるところです。

もしフォント関連で悩みたくないのであれば、WEBフォントではなくデバイスフォントを主体に使っていくようにしましょう。

その際、Windows・Mac両対応の游ゴシックやArialなどを使用するとデバイス間での表示差異もなくなります。

font-familyプロパティを使えば標準フォントではない明朝体フォントもWEBで使えるので、ぜひ覚えておいてください。