Webフォントとは?

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

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

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

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

そこで便利なのが、CSS3のWebフォント機能です。


 
ブラウザがフォントファイルごとダウンロードして表示に使うCSSの仕組み
Webフォント機能は、フォントファイルも一緒にダウンロードして表示に使用する

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

Webフォントとは、ブラウザがフォントファイルそのものをダウンロードして表示に使ってくれる仕組みのことです。閲覧者の環境に望みのフォントがインストールされていなくても、ウェブ上にフォントファイルさえ用意しておけば望みのフォントで文字を表示できます。

※このWebフォント機能は、文字を望みのフォントで表示させる以外にも、アイコンフォントを使って様々な記号を表示させる方法にも活用されています。

今回は、そのWebフォントの使い方をご紹介いたします。


 

Webフォントの使い方

本記事では、CSSのWebフォント機能を使って望みのフォントで文字や記号を表示する方法として、以下の3つの方法をご紹介いたします。

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

840種類を超える膨大な欧文フォントをWebフォントとして提供している「Google Fonts」

Googleは、840種類を超える欧文フォントをWebフォントとして提供する「Google Fonts」というサービスを運営しています。

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


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

Webフォントを使うCSSソース

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

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


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

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

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

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


 
本記事では、上記に挙げた3通りのWebフォント使用方法を1ページずつ解説いたします。まずは、Google Fontsで望みのフォントを表示させる手順から見ていきましょう。