Web フォントとは？

やさしいIT用語解説 2013-04-01 08:00

Web フォントはクラウドに保存してあるフォント

最近の Web 制作では「Web フォント」というものが使えるようになってきました。Web フォントとは、インターネット上に保存してあるフォントの事です。CSS（スタイルシート）の設定により、パソコンに保存してあるフォントと Web 上に保存してあるフォントがシームレスに使えます。

「フォント」とは？

ではここで言う「フォント」とは何なのでしょうか？

フォントは文字の見た目の形を記録したファイルです。見た目の統一がある字形ごとに名前がついてまとまっており、これらの名前には「Times New Roman」、「Helvetica」、「ＭＳ　Ｐゴシック」などがあります。

MSワードなどで文章を書く時は、「ＭＳ　Ｐゴシック」や「ＭＳ　Ｐ明朝」などの文字の種類が選べますよね。この見た目を定義しているのがフォントファイルで、通常はパソコンの中に保存されています。

フォントと言語の関係

ところで、「Times New Roman」や「Helvetica」では、日本語は表示できません。もし選んだとしても文字化けして表示されるか、または、日本語部分は選ぶ前のフォント指定が残ります。これは、表せる文字の種類と数がフォントによって異なるためです。「Times New Roman」にはひらがなや漢字は含まれていませんし、「ＭＳ　Ｐ明朝」にはハングル文字は含まれていません。

フォントとOSの関係

「Times New Roman」や「Helvetica」は現在ほぼどのパソコンにもフォントファイルが予め保存（＝インストール）されていますが、日本語のフォントについては OS の種類によってインストールされているフォントが異なります。例えば Windows ならインストールされている日本語フォントは「ＭＳ　Ｐゴシック」や「メイリオ」、Mac であれば「ヒラギノ角ゴ　Pro」等です。このため逆に、Mac では「メイリオ」は表示できません。

このように、パソコンに保存されていないフォントは普通は表示できないのですが、これを、フォントファイルを Web 上に保存しておく事によりどこでも表示できるようにしたのが Web フォントです。

誰がいつどこに Web フォントを保存しておくのですか？

標準仕様に従って作成したフォントファイルを Web サイトに公開すればどなたでも Web フォントを作成できるのですが、これはそれなりにセンスと技術とサーバ資源を必要とする事ですね。現在、まとまって Web フォントを提供しているサイトの一つに Google web fonts があります（上の図）。

このサイトでは多数の無料のフォントを提供しており、今の所英文フォントのみのようですが自由に使えます。

日本語 Web フォント

Google のサイトには残念ながら無料の日本語フォントはありません。では日本語では Web フォントは使えないのかというと、有料で日本語 Web フォントを提供しているサイトがあります。料金体系としては、「一定期間に〇〇回表示まではいくら」というもので、やはり元からフォントを作成している会社が Web フォントも販売しているという事が多いようです。日本語は文字数が多く、フォントを作るのは大変ですからね。

このようなサイトは今後増えて行くでしょうが、2013年3月現在メジャーな Web フォントサービスサイトとして以下の2つをご紹介します。

フォントプラス - 国内フォントメーカーが複数参画
http://webfont.fontplus.jp/

TypeSquare - モリサワ（日本語フォントの老舗）が運営（下の図）
http://typesquare.com/

CSS
文字

<< レスポンシブ Web デザインとは？アイコンフォントとは何ですか？ >>

このコラムに類似したコラム

CMSでらくらくホームページ作成三井博康 - Webプロデューサー（2013/12/05 16:04）

こうして改善、Google のスコア (5) CSSを圧縮して表示速度改善井上みやび子 - Webエンジニア（2013/10/29 07:00）

アメブロのサイドバーのタイトル文字を簡単に英語表示にする方法小菅太郎 - ITコンサルタント（2013/09/02 22:13）

アイコンフォントとは何ですか？井上みやび子 - Webエンジニア（2013/04/11 08:00）

レスポンシブ Web デザインとは？井上みやび子 - Webエンジニア（2013/03/21 08:00）