media archive

Web制作ではフォント指定に注意!指定のフォントで表示されない理由とWebフォントについて

本記事では、Webページ上でのフォントの表示の仕組みと、Webフォントの基礎知識について解説しています。

本記事の内容
非表示

フォントってなに?

まず最初にフォントとは何かというところですが、日本のフォントメーカー(株)モリサワさんのサイトから引用させていただくと、

「フォント」は、現在ではデジタル化した書体のことを指します。

書体とフォント | フォント用語集 | 文字の手帖 | 株式会社モリサワ

と説明されている通り、現在においてはデジタル化した書体のことをフォントと言います(上記引用ページにも書いてありますが、活版印刷が主流だった時代は元々もう少し違う意味でした)。

Webページでフォントはどうやって表示されてるの?

普段私たちが見ている様々なWebページに表示されている文字も、ゴシック体や明朝体、その他の書体など、何らかのフォントで表示されています。

Webページの文字のフォントをどのフォントで表示するのかは、CSSのfont-familyプロパティで指定します(フォント名に半角スペースがある場合は、シングルクオテーション'かダブルクオーテーション"で囲った中にフォント名を書きます)。

CSS

font-family: "Hiragino Sans", Meiryo, sans-serif;

Webページを表示するとき、Webブラウザはそのデバイスにインストールされているフォントから、font-familyに指定されたフォントで文字を表示します。

しかしこのとき、注意しなければならないことがあります。その注意点とは、それぞれのデバイスの、OSの種類やバージョンによって、初期状態でインストールされているフォントに違いがあるということです。

補足

デバイスって?

デバイスとは、ここではパソコンやスマホ、タブレットなどの機器のことです。

OSって?

OS(Operating System)は簡単にいうと、コンピュータを動かすために必要な基本的なソフトウェアのことです。例を挙げると、パソコン用のOSには、

  • Mac OS(Appleが開発したOS)
  • Windows(Microsoftが開発したOS)

などがあり、スマートフォン用のOSには、

  • iOS(Appleが開発したOS)
  • Android(Googleが開発したOS)

などがあります。

インストールされているフォントに違いがあるということは、font-familyで指定したフォントがインストールされていない場合、指定したフォントで表示されないということが発生します。

font-familyで指定したフォントで表示される
font-familyで指定したフォントで表示されない

注意点

font-familyに指定したフォントで表示されないというだけで、文字情報自体が表示されないということではありません。

ここで、その具体的な例を挙げると、例えば「ヒラギノ角ゴ」というフォントでは、

インストールされているインストールされていない
Mac OSWindows
iOSAndroid
(2020年4月22日現在のヒラギノ角ゴのインストール状況)

という違いがあるので、

CSS

/* Hiragino Sansはヒラギノ角ゴの英語表記です。 */
font-family: "Hiragino Sans";

と指定すると、Mac OSとiOSではヒラギノ角ゴで表示されますが、WindowsやAndroidなどではヒラギノ角ゴで表示されません。

font-familyで指定したフォントがインストールされていない場合指定したフォントで表示されない
ヒラギノ角ゴを指定した例

上記のようなことが発生するため、CSSのfont-familyに複数のフォントを指定することで、それぞれのデバイスで表示されるフォントを、ある程度コントロールする必要があります。

font-familyに複数のフォントを指定した場合、前に書かれているものから優先的に適用されます。例えば、

CSS

/* Meiryoはメイリオの英語表記です。 */
font-family: "Hiragino Sans", Meiryo, sans-serif;

と指定したときブラウザは、

font-familyに複数のフォントを指定した場合の優先順位のフローチャート

という判断でフォントを適用します。

sans-serifという指定は、総称ファミリ名を使った指定で、「ゴシック系のフォント」という意味です。

以上がWebページでフォントが表示される仕組みでした。

今まで見てきたようにWeb制作においては、デバイスによってフォントが変わることをある程度許容する必要があります。

しかしどうしても、どんなデバイスでも同じフォントで表示させたい場合に、そのような問題を解決するため、「Webフォント」という技術が策定されました。

次にそのWebフォントについてみていきましょう。

Webフォントってなに?

Webフォントとは

Webフォントは、Webサーバー上に用意されたフォントを表示する技術のことです。

Webサーバー上のフォントをダウンロードすることで、どのデバイスでも同じフォントを表示させることができます。

Webフォントを使用するとどのデバイスでも同じフォントを表示させることができる
Webフォント Noto Sans JP を指定した例

Webフォントってどうやって使うの?

Webフォントを使うには、基本的に提供されているWebフォントサービスを利用します。導入する際は、それぞれのサービスによって決められた手順に従って導入しましょう。

有名なWebフォントサービスには下記のようなサービスがあります。

Google Fonts

https://fonts.google.com/

Googleが提供している無料のサービス。

Adobe Fonts

https://fonts.adobe.com/

Adobeが提供している、Adobe Creative Cloudを契約していると利用できるサービス。

TypeSquare

https://typesquare.com/

フォントメーカーのモリサワが提供している有料サービス(非常に限定された条件によっては無料)。

FONTPLUS

https://fontplus.jp/

ソフトバンクの連結子会社であるSBテクノロジーが提供している有料サービス。

注意

Webフォントの使用には、Webサイトを格納しているサーバーにフォントデータを格納するという方法もありますが、この方法はフォントのライセンス上禁止されていることが多いので注意してください。

もしこの方法を採用する場合は、フォントのライセンスをしっかり確認しましょう。

Webフォント利用時の注意点

Webフォントの表示には、先ほど述べた通りWebサーバー上のフォントをダウンロードするので、Webフォントを利用しない場合に比べ、その分の通信がプラスアルファで発生します。

そのため、何種類ものWebフォントを利用すると、フォントダウンロードの通信が大量に発生し、サイトの表示スピード低下の原因になります。

また、欧文フォント(アルファベットが主体の言語のフォント)については

  • 半角である
  • アルファベット、数字、記号など、言語としての文字数が少ない

という理由から、データ量が軽い傾向にあります。

しかし和文フォント(日本語のフォント)は

  • 全角である
  • ひらがな、カタカナ、漢字、アルファベット、数字、記号など、言語としての文字数が多い
  • 半角の文字もある

という理由から、欧文フォントに比べてデータ量が非常に重いです。

以上のようなデメリットがあるため、Webフォントを導入する際は、Webフォントの利用が本当に適切かどうか検討したうえで導入するようにしましょう。

特に和文のWebフォントはデータ量が非常に重いため注意が必要です。

まとめ

最後に、もう一度ポイントを箇条書きでまとめておきます。

  • フォントとは、現在においてはデジタル化した書体のこと
  • Webページで表示できるフォントは、基本的にデバイスにインストールされているフォントのみ
  • デバイスによって表示されるフォントが変わる場合がある
  • Webフォントを利用すると、どのデバイスでも同じフォントを表示させることができる

Webフォントについては、

  • メリット:どのデバイスでも同じフォントを表示させることができる
  • デメリット:余分な通信が発生するため、サイトの表示スピードが低下するおそれがある

Web制作時には以上のことを念頭に、フォントについて検討していただければと思います。

TOP