Web技術系中心に割と何でも更新中

Webフォントの基本的な知識と使い方【具体的な手順を紹介】

Programming Web

Web制作者

Web制作初心者
「文字のフォントをおしゃれなものに変えてみたいな。Webフォントというものを使うとテキストはそのままでデザインをおしゃれにできるらしい。でも使い方がわからない…具体的にどうすればいいんだろう?」

こういった疑問にお答えします。

本記事の内容

  • Webフォントの具体的な使い方

こんにちは、mine(@mineblog7)です。

ブログ歴は4年、Web制作歴は7年ほど。
現在はmineblogを一人で運営中です。

過去に、Web制作を行う上でWebフォントを導入する機会がありました。
Webフォントの基本的な使い方を紹介します。

この記事では前提として、CDN方式ではなくて、フォントファイルをダウンロードする方法になります。

Webフォントとは?

フォント

具体的な使い方を紹介する前に、Webフォントについて少し説明します。

通常CSSでフォントを指定すると、ブラウザは閲覧しているデバイスにインストールされているフォントから指定されたフォントを呼び出して表示させます。

しかし、指定したフォントの種類によっては、デバイスにインストールされていないものもあり、制作側で意図したテキストの表示が上手くできない場合があります。

ウェブサーバー上にあるフォントを指定してブラウザに参照させることで、デバイスに依存することのないフォントの表示を実現させるのがWebフォントという技術です。

Webフォントを利用するメリット

Webフォントを利用するメリットは下記の通りです。

Webフォント利用のメリット

  • デバイスやOS環境に依存しないテキスト表示が可能
  • 文字のデザイン性を高めつつ、SEO的に有効
  • メンテナンス性を向上させることができる

どんなデバイス(PC・タブレット・スマホなど)、OS(Windows、MacOSなど)であろうと、制作者が意図したテキスト表示が可能です。

デバイスなどにインストールされているフォントに比べてデザイン性の高いフォントの使用が可能かつ、テキストはそのまま表示可能なので、SEO的にも有利に働きます。

文字サイズの変更、レスポンシブ対応等のメンテナンス性を向上させることができます。テキストを画像化すると修正や新規作成する必要がありますが、Webフォントは文字を変更するだけで済みます。

Webフォントを利用するデメリット

Webフォントを利用するデメリットは下記の通りです。

Webフォント利用のデメリット

  • ページの読み込みに時間がかかる
  • フリー商用可の日本語フォントの種類が限られる

日本語は、ひらがな、カタカナ、漢字といった文字数が膨大なため、ページの読み込みに時間がかかります。ページの読み込み時間短縮のために、サブセット化という方法があります(後述します)。

フリーかつ商用可の日本語フォントの数が限られてしまいます。有料のものであればそこそこ見つかりますが、コストがかかるのがネックです。日本語フォントを利用する側も探すのが大変ですが、用意する側も大変です。

Webフォントの使い方(通常)

webフォント使い方

では、早速Webフォントを導入してみましょう。

ライセンスフリーのWebフォントファイルをダウンロード

ゴシック、明朝、手書きなど多種多様なWebフォントが存在しています。
Webフォントを使用する際はライセンスフリー(無料での商用可)であることを必ず確認しておきます。

今回はWebフォントを使用していることが分かりやすいように「たぬき油性マジック」というフリーフォントを使います。油性の太いマッキーペンで書いたようなフォントで、結構見かけたことある人もいるのでは?

» たぬき油性マジックをダウンロードする

たぬき油性マジックをダウンロードしたら、解凍してください。
拡張子がttf(True Type Font)のものが使用するWebフォントになります。

新しいバージョンの主要ブラウザの多くはwoff形式のフォントファイルに対応しています。

IE4~IE8はeot形式のフォントファイルにのみ対応しています。safariやandroid、iOSなどはttfに対応しています。

ブラウザやバージョンなどで対応しているファイル形式が変わってきますが、下記3つのファイル形式でフォントファイルを用意すればおおむねOKです。

用意するフォントファイル

  • ttf(True Type Font)
  • woff(Web Open Font Format)
  • eot(Embedded OpenType)

ダウンロードしたttfファイルをwoffとeotに変換する必要があります。
その変換する方法を詳しく説明します。

フォントファイル変換ツール(WOFFコンバータ)をダウンロード&インストール

ttf形式のフォントファイルを変換するためのツールを用意します。

武蔵システムが提供しているWOFFコンバータというツールです。
WOFFコンバータを使えば、ttf形式のファイルをwoff形式のファイルとeot形式のファイルへ簡単に変換することができます。

» WOFFコンバータをダウンロードする

WOFFコンバータをダウンロードしてインストールしたら、起動させます。

画面の項目にある変換前ファイルでダウンロードしたttfファイルを参照します(ここではファイル名をsample-font.ttfにしています)。

次に、EOTファイルを作成するへチェックを入れ、変換開始ボタンをクリックすれば下記のようなファイルが生成されます。

生成されるファイル

  • sample-font.eot
  • sample-font.ttf
  • sample-font.woff

この3形式のフォントファイルをCSSで設定します。

CSSでfont-familyを設定

@font-face {
	font-family: 'sample-font';
				 src: url('fonts/sample-font.eot'); /* IE9以降 */
				 url('fonts/sample-font.woff') format('woff'), /* モダンブラウザ */
				 url('fonts/sample-font.ttf')  format('truetype'), /* Safari, Android, iOS */
}

CSSで上記のように記述します。
@font-face規則で、font-familyでフォントファイルを指定します。

font-familyに適当な名前をつけます(後に使いたい文字列にsample-fontを指定すればOKです)。

【参考】@font-faceについて

.sample-font {
	 font-family:"sample-font";
	 font-size:1.3em;
}
実際に、フォントを指定するときは、この場合「sample-font」という名前のクラス名でfont-familyを指定します。

Webフォントの使い方(サブセット化する場合)

webフォント使い方

フォントファイルの中から指定した文字だけを抜き出してサイズを小さくすることをサブセット化と言います。特定の文字だけにWebフォントを使いたいという場合に利用します。

ライセンスフリーのWebフォントファイルをダウンロードするところは通常にWebフォントを使用するときと同様です。

サブセットフォントメーカーとWOFFコンバータを使用

サブセット化するために、WOFFコンバータと同様、武蔵システムが提供しているサブセットフォントメーカーを使用します。
» サブセットフォントメーカーをダウンロードする

ダウンロード・インストールして、サブセットフォントメーカーを起動して下記項目を入力します。

入力項目

  • 作成元フォントファイル(ダウンロードしたttfファイルを参照する)
  • 作成後フォントファイル(ファイルのパスとファイル名を指定)
  • フォントに格納する文字(任意。必要な文字)
  • 書体名(任意の名前)

作成終了後、WOFFコンバータを起動するにチェックを入れてください。
最後に作成開始ボタンをクリックします。

次に、WOFFコンバータが起動しますので、EOTファイルを作成するにチェックを入れてください。HTMLで確認したい場合はサンプルHTMLファイルを作成するにチェックを入れてください。

最後に変換開始ボタンをクリックでOKです。
そうすると、先ほどと同様にファイルが生成されているはずです。HTMLファイルをブラウザで見れば、すぐにフォントを確認できます。

生成されたフォントファイルを、先程と同じように通常通りCSSで指定すればOKです。

まとめ

Webフォントをダウンロード・ファイル変換して、フォントファイルをCSSで指定するという簡単な流れです。

ポイント

  • ライセンス許可が下りているWebフォントをダウンロードする
  • CSSで@font-face規則により、フォントファイルを指定してfont-familyを設定する
  • 特定の文字だけにWebフォントを使用する場合、サブセット化を行う

テキストのデザインをリッチにしてSEOはそのままにしたいときは使ってみてもいいですね。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果