×

デザイン性とSEO効果を兼ね備えたWebフォントを使ってみた【基本知識と使い方まとめ】

2015年3月31日 コーディング

Webフォントの使い方

Webフォントを導入する機会がありましたので、そのときにやったことをまとめました。手順を覚えれば手軽に導入できるので、参考までにご覧ください。

Webフォントとは?

導入の前にWebフォントについて少し説明します。

通常、CSSでフォントを指定すると、ブラウザは閲覧しているデバイスにインストールされているフォントから指定されたフォントを呼び出して表示させます。しかし、指定したフォントの種類によっては、デバイスにインストールされていないものもあり、制作側が意図した表示をできない場合があります。

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

Webフォントを導入しよう

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

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

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

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

たぬき油性マジックのダウンロードはこちから

ダウンロードしたら、解凍してください。拡張子がttf(True Type Font)のものが使用するWebフォントになります。
新しいバージョンの主要ブラウザの多くはwoff形式のフォントファイルに対応しています。IE4~IE8はeot形式のフォントファイルにのみ対応しています。safariやandroid、iOSなどはttfに対応しています。
(※2015年3月現在)

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

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

ダウンロードしたttfファイルをwoffeotに変換する必要があります。その方法は以下で説明します。

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

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

WOFFコンバータのダウンロードはこちら

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

woffコンバーター

「変換前ファイル」でダウンロードしたttfファイルを参照して、「EOTファイルを作成する」へチェックを入れます。最後に「変換開始」のボタンをクリックすれば下記のようなファイルが生成されます。

フォントファイル

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

CSSに@font-face規則でフォントファイルを指定してfont-familyを設定する

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

上記のようにプロパティでフォントファイルを指定します。加えて、font-familyに適当な名前をつけます(後に使いたい文字列にmigo-fontを指定すればOKです)。

【参考】Using @font-face | CSS-Tricks

試しにフォント指定してみましょう。「migo-font」という名前のクラス名で下記のようにfont-familyを指定します。

.migo-font {
     font-family:"migo-font";
     font-size:1.3em;
}

Webフォントを使ってみました。どうですか?上手く表示されていますか?想像より簡単に導入可能ですよ。

たぶん上手く表示されていると思います。

サブセット化してWebフォントを使用する場合

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

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

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

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

サブセットフォントメーカーのダウンロードはこちら

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

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

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

サブセットフォントメーカー

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

woffコンバーター

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

生成ファイル

生成されたフォントファイルを通常通りCSSで指定すればOKです。

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

Webフォントの利用によるメリットを挙げていきます。

環境に依存しないフォント指定が可能

先述しましたが、デバイスやOSなどの環境に依存せずに指定したフォントを表示できます。

文字のデザイン性を高めるかつSEO的に良い影響を与える

デバイスなどにインストールされているフォントに比べてデザイン性の高いフォントの使用が可能かつ、テキストを使用するためSEO的に良い影響を与えます。

メンテナンス性を向上させることができる

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

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

Webフォントの利用によるデメリットを挙げていきます。

ページの読み込みに時間がかかる

日本語は、ひらがな、カタカナ、漢字といった文字数が膨大なため、ページの読み込みに時間がかかります。ページの読み込み時間短縮のために、サブセット化という方法があります(※先述のサブセット化してWebフォントを使用する場合参照)。

フリー商用可の日本語フォントの種類が限られる

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

※ちなみに、最近Googleが日本語のWebフォントを提供しているらしいです。Google Fontsは気が向いたら使ってみたいですね。

まとめ

いかがでしたか?Webフォントをダウンロード・ファイル変換してCSSで指定するだけなので、手軽に導入できます。一度試してみてはいかがでしょうか?

【押さえておくべきポイント】

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

関連記事