見るデバイスによってWebサイトのフォントが違う？　CSSのfont-family設定について

どのOSでも読みやすい、
Webサイトに合ったフォントを設定したい！

同じホームページなのにパソコンとスマホで書体が違う、と気になったことはありませんか?
実はWebフォントを設定したサイトでなければ、OSによって搭載されている書体が異なるため、Windows、Mac、iOS（iPhone・iPad）、Android、各OS全て同じ書体で表示されることはありません。
「Macでは問題ないがWindowsで閲覧すると読みにくい」「高級感を出したいのに、こちらの端末で見ると親しみやすさの方が強い」
このようにフォントによってサイトのイメージが変わってしまうこともあります。
書体を統一させたいならWebフォントを使えばいいのでは？　と思いますよね。ただ、Webフォントにもデメリットがあります。

今回はWebフォントの簡単なご紹介と、Webフォントを使わない場合のイメージに近いフォント設定についてをまとめてみました！

目次

各デバイスに搭載されているフォント

Windows、Mac、iOS、Androidで機種にインストールされているフォントは異なります。

それぞれ搭載されている主なフォントはこちらです。

■ Windows … 游ゴシック、メイリオ、游明朝、HG丸ゴシック

■ Mac … 游ゴシック体、ヒラギノ角ゴシック、ヒラギノ明朝、ヒラギノ丸ゴ Pro

■ iOS … ヒラギノ角ゴ、ヒラギノ明朝

■ Android … Noto Sans CJK（端末によります）、Androidには明朝体のフォントはありません

CSSでfont-familyを設定する

例えば、全ての端末でメイリオを使用したいと考えてもWindowsにしかフォントデータが無いため、その他では別のフォントに置き換えられます。そのためフォントを指定する際は、cssのfont-familyに複数のフォント名を記載します。
こちらは記入例です。

body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

CSS設定のポイント

font-familyを指定する時の注意点はこちらです。

  • 最後に総称フォントを入れる
  • 優先させるフォントから先に記載する。（例　font-family:"Hiragino Sans"（Mac標準フォント）,Meiryo（Windows標準フォント）,sans-serif（総称フォント）;）
  • 指定したい欧文フォントがあれば、和文フォントの前に記載する
  • 游ゴシックはWindowsの表示でかすれてしまうため Mediumをつける

総称フォントとは「sans-serif（ゴシック体）」や「serif（明朝体）」のことで、これを入れておくことで、指定したフォントがOSに無い場合でも、OSに標準で入っているフォントを表示してくれます。

font-family設定一覧

font-familyの指定パターン一例をまとめてみました。

游ゴシック

游ゴシックは見た目が美しく文字間隔にゆとりがあり読みやすい。iOS用にヒラギノ角ゴを記載。

font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", sans-serif;
ヒラギノ角ゴ
メイリオ

ヒラギノ角ゴ（やや大きめの字面で読みやすい）、メイリオ（硬すぎずカジュアルすぎない）

font-family:"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
明朝体

上品さ、繊細さ、和のイメージに。（androidではゴシック体表示になります。）

font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
丸ゴシック体

柔らかいイメージに
（iOS、androidではゴシック体表示になります。）

font-family: "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;

androidで明朝体、丸ゴシック体を使用したい場合やiOSで丸ゴシック体を使用したい場合はWebフォントを使用します。

Webフォントとは？　メリット・デメリット

Webフォントを設定すると、ネット上のフォントデータが読み込まれます。デバイスにフォントが入っていなくても、読み込まれた共通のフォントで閲覧してもらうことができます。

Webフォントのメリット

  • どんな閲覧環境でもサイトの印象が変わらない。
  • 個性的なフォントをそのまま使用できる（画像で作成せずに済む）ため編集が簡単で効率的。
  • 表現が広がり、デザインの差別化を図れる。

フォントが変わるとページのイメージが変わってしまいますが、Webフォントなら制作した通りの表示なので安心ですね。

Webフォントのデメリット

  • フォントデータの読み込みでページが重くなる。ページ読み込みに時間がかかれば離脱率につながってしまう。
  • ライセンス、規約の確認が必要。
  • 費用の掛かるWebフォントもある。

日本語は特に文字の種類が多いのでデータが大きくなります。今後5Gの普及で改善されるかもしれませんが、ページ表示速度が落ちるのは困りますね。デザインにこだわっても、ユーザーに閲覧されなくてはWebサイトの意味がありません。Webフォントは必要最低限にとどめた方が良さそうです。
また使用する際は著作権や費用・商用利用の確認を行いましょう。

無料で使いやすい！　Google Fontsについて

Googleのサービス「Google Fonts」は無料で、商用利用もOKです。
日本語の種類も豊富で導入しやすいというメリットもあります。

使い方はカンタンです。Google Fonts（日本語書体はこちら）から使用したいフォントを選択します。コードが表示されるので、コピーして自分のサイトに貼り付けます。

人気のある書体一例

Noto Sans Japanese…読みやすく少し丸みのある優しいゴシック体。

Noto Serif Japanese…読みやすく親しみのある明朝体。

M PLUS Rounded 1c…優しさ、柔らかさ、親しみやすさのある丸ゴシック体。

おわりに

OSによってフォント表示が異なることや、Webフォントのメリット、デメリットをご紹介しました。
端末にインストールされるフォントは今後も変更されていくことが考えられます。また、流行の書体は変化します。
読みやすいページの保守にはフォントをメンテナンスして変化に対応していくことが必要です。

無料で相談する