Web フォントとは? - ホームページ・Webデザイン - 専門家プロファイル

井上 みやび子
すぐ使える株式会社 代表取締役
東京都
Webエンジニア

注目の専門家コラムランキングRSS

対象:ホームページ・Web制作

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

Web フォントとは?

- good

  1. 法人・ビジネス
  2. ホームページ・Web制作
  3. ホームページ・Webデザイン
やさしいIT用語解説

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

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

「フォント」とは?

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

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

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

フォントと言語の関係

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

フォントとOSの関係

「Times New Roman」や「Helvetica」は現在ほぼどのパソコンにもフォントファイルが予め保存(=インストール)されていますが、日本語のフォントについては OS の種類によってインストールされているフォントが異なります。例えば Windows ならインストールされている日本語フォントは「MS Pゴシック」や「メイリオ」、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/

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

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)