ブラウザがフォントごとダウンロードして表示に使う「ウェブフォント」

指定したフォントがインストールされている環境でないと、そのフォントでは表示されない

指定したフォントがインストールされている環境でないと、そのフォントでは表示されない

CSSを使えば、文字の表示に使ってほしいフォント名を指定できます。しかし、フォント名をいくら指定しても、閲覧者の環境に同じフォントがインストールされていなければ、意味がありません。指定されたフォントがなければ、右図のようにデフォルトのフォントで表示されてしまいます。

従来、絶対に望みのフォントで表示させたければ、画像化するくらいしか方法がありませんでした。しかし、画像化には様々なデメリットがあり、望ましくありません。


 
ウェブフォント機能は、フォントファイルも一緒にダウンロードして表示に使用する

ウェブフォント機能は、フォントファイルも一緒にダウンロードして表示に使用する

そこで便利なのが、CSS3で新しく追加された「ウェブフォント」機能です。「ウェブフォント」を使えば、ブラウザがフォントファイルをダウンロードして表示に使ってくれるため、閲覧者の環境に同じフォントがインストールされていなくても、望みのフォントで文字を表示できます。

今回は、その「ウェブフォント」の使い方をご紹介致します。


 

ウェブフォントの使い方

本記事では、ウェブフォント機能の使い方について、以下の3つの方法をご紹介致します。

1. Google Fontsを使って、望みのフォントを表示させる
膨大な欧文フォントをウェブフォントとして提供「Google Fonts」

膨大な欧文フォントをウェブフォントとして提供「Google Fonts」

Googleは、600種類を超える欧文フォントをウェブフォントとして提供する「Google Fonts」というウェブサイトを運営しています。

「HTMLソースまたはCSSソース内に指定の1行を加えるだけ」というとても簡単な方法で、豊富なフォント群から望みのものを選んで表示に使うことができます。


 
2. フォントファイルを直接アップロードして、ウェブフォントを使うようCSSを記述
ウェブフォントを使うCSSソース

ウェブフォントを使うCSSソース

フォントファイルを自サイト上にアップロードしておき、それを利用するようCSSを記述することもできます。

自分で作成したフォントや、ライセンスフリーのフォントなどを使いたい場合は、この方法を使って簡単に望みのフォントで文字を表示できます。


 
3. 日本語ウェブフォント提供サービス:モリサワ「TypeSquare」を使う
たくさんの美しい日本語フォントを利用できるウェブフォントサービス「TypeSquare」

たくさんの美しい日本語フォントを利用できるウェブフォントサービス「TypeSquare」

日本語フォントを提供するサービスも増えてきました。例えば、フォント販売大手のモリサワでは、ウェブフォントサービス「TypeSquare」で、多数の日本語フォントを提供しています。

日本語は文字数が多いため、フォントファイルをそのままダウンロードすると時間がかかってしまいます。このTypeSquareでは、ウェブページ内に存在する文字に限定してフォントを配信することで、ダウンロード時間を最小限にする工夫がなされています。日本語フォントを手軽に使える便利なサービスです。


 
※本記事は、初版を2012年6月25日に公開し、2014年7月・2016年6月に改訂しました。各種サービスの内容は2016年6月時点の情報に更新していますが、記事中の一部の画面イメージは、2012年や2014年当時のものです。

それでは、まずは、Google Fontsサービスを使って、望みのフォントを表示させる手順からご紹介致します。