制作お役立ち便利帳
文字に関するご質問

Q カタログと同じフォントをWebにも使いたい。

A

Webブラウザによる文字表示は、一般的にはそのパソコン内部にあるフォントで行うようになっているので、Webを最初に作った時のデザインが再現するわけではありません。具体的にはOSによって標準フォントは決まってしまいます。

Windows メイリオ、MSゴシック、MS明朝、など
MacOS ヒラギノ角ゴシック、ヒラギノ明朝、など
iOS HiraKakuPro、HiraMinPro、など
Android モトヤLシーダ、モトヤLマルベリ、など

ただしOSの更新で入れ替わったり、利用者がツールを使って変更している場合もあります。

そこでデザイン性が重要な画面ではフォントを画像化してWebに貼り付けることが行われましたが、画像化した文字は検索の対象ではなくなってしまうとか、音声読み上げに対応できない、また修正が行い難くなるので、印刷用と同等のフォントをWebでも任意に使える方法として、Webフォントという仕組みが使われるようになりました。

Webフォントとは、Webサーバ側にインストールされたフォントをページデータと共に利用者に送りつけて、Webを最初に作った時のフォントがそのまま再現できる仕組みで、WebがCSS3（カスケーディングスタイルシート）に対応している場合に使えます。

各Webページの記述の中に、そのページで使うフォントの種類や名前や置いてある場所を書いておくと、利用者がどこのどんな端末からそのページを呼び出しても、サーバー上の該当フォントを参照するようになるので、表示は利用者のパソコン内のフォント環境の制約がなくなります。

この仕組みを使うと、フォントの選択によるデザインの表現領域が広がり、印刷紙面のような詰め組みもできるようにしたところもあります。ただし使用するフォントは欧文では多くの無料フォントがありますが、日本語では無料のものは印刷用とは対応がとれなかったり、印刷用フォントのすべてがWebフォントには対応していないなどで、有料でWebフォントを入手するか利用ライセンス契約をWebサーバを運営する側が結ぶ必要があります。（Webページを閲覧している利用者の負担にはなりません。）

日本語Webフォントは各フォントメーカーが提供するもの以外に、Softbankのフォントプラスのように複数のメーカーのフォントを扱うところもあります。これらのフォントの種類を見定めた上で印刷用のフォントも選択すれば、カタログと同じフォントでWeb上の表現もできるようになります。

Webフォントの利用方法や料金もいくつかの方式があり、そのWebサイトがCMSを使ったものであるのかどうか、利用者数がどれくらいあるのか、課金方式がページビューに応じた方法か固定料金なのか、などによって選択する方式が異なってきます。

参考：