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

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

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

の2つが存在します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などなど50種類以上

などなど80種類以上

などなど40種類以上

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

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

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

 

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

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

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

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

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

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

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

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