Webフォントを使う

フォント次第でサイトの印象は思った以上に変わります。 従来Webサイトで表示されるフォントは、ユーザーの利用環境に依存していました。そこで、CSS3で登場した「@font-face」を利用します。

未対応のIEでも好きなフォントでタイポグラフィを表示できます。

完成イメージ

デフォルトで表示されるフォントです。

↓

目的のフォントで表示することができます。

Webフォントを利用するまでの流れ

Webフォントは、以下のような流れで利用します。

①フォントファイル（TTFやOTFファイル）を準備。

↓

②フォントファイルをサーバーへアップロード。

↓

③スタイルシートで読み込む。

ブラウザで表示可能な形式一覧

まず、各ブラウザで表示可能なフォント形式をチェックします。一般的に、パソコンにインストールされているフォントは「TTF」「OTF」形式です。

しかし、旧IEではEOT形式でなければ表示できません。モダンブラウザでは、WOFFという見慣れない形式です。少し古いiPhoneなどで使われているiOSでは、SVG形式でなければ表示できません。

一つのフォントでは、全てのブラウザをカバーしきれないのが現状です。

Webフォント作成

Webフォントを各ブラウザへ対応させるため、複数の形式のファイルを用意します。「TTF」を「OTF」や「SVG」に変換します。変換するためには、「@FONT-FACE GENERATOR」というサービスを利用します。

①「@FONT-FACE GENERATOR」を開きます。

→@FONT-FACE GENERATOR
②「UPLOAD FONTS」ボタンをクリックし、フォントファイルを選択します。

③「BASIC」「OPTIMAL」「EXPERT」の３つのメニューがあります。
「OPTIMAL」が推奨されているため、これを選択します。

④「Agreement」にチェックを入れると「Download」ボタンが出現します。
ファイルをダウンロードします。

⑤ダウンロードしたZipファイルを解凍します。

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。作成したsvgなどのWebフォントファイルを、fontフォルダに配置します。

※wordpress基準ですが、wordpressでなくても作成できます。

コード

style.css

@font-face {
    font-family: 'lobster_1.4regular';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lobster_1.4-webfont.woff') format('woff'),
         url('../fonts/lobster_1.4-webfont.ttf') format('truetype'),
         url('../fonts/lobster_1.4-webfont.svg#lobster_1.4regular') format('svg');
}

h1.webfont {
         text-shadow: 0 1px 1px rgba(255, 255, 255 8);
         font-family: 'lobster_1.4regular';
         font-size: 180%;
}

index.php

<h1 id='webfont'>タイトル</h1>

解説

style.css

フォント名

@font-face {
    font-family: 'lobster_1.4regular';
    font-weight: normal;
    font-style: normal;

フォント名「’lobster_1.4regular’」を記述します。

フォントファイルへのパス

    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lobster_1.4-webfont.woff') format('woff'),
         url('../fonts/lobster_1.4-webfont.ttf') format('truetype'),
         url('../fonts/lobster_1.4-webfont.svg#lobster_1.4regular') format('svg');
}

各フォントファイルへのパスを記述します。「font」フォルダを参照するため、「../font」と書きます。ファイルは、上に記述したファイルが優先されます。

例）Firefoxの場合、表示可能な形式は、TTF、OTF、WOFFです。一番上の記述がWOFFであるため、WOFFを優先します。

    src: url('../fonts/lobster_1.4-webfont.eot');

.eotファイルへのパスです。IE用の記述で、IE9の互換モードに向けたものです。IE9互換モードは.woffを使えないためこの記述があります。

    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('embedded-opentype'),

.eotのあとに「?」があり、format(‘embedded-opentype’)と続いています。IE8以下では、「?」以降の記述をクエリ文字列として扱い、実際にはそれ以降を無視します。つまり、.eotファイルが使用されます。

IE9で.woffを読み込むには？

    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('embedded-opentype'),

↓

    /*src: url('../fonts/lobster_1.4-webfont.eot');*/
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('eot'),

IE以外のブラウザでは、format(‘woff’)のように、ファイルフォーマットを指定する必要があります。IE8以下の場合は記述しません。

上記の「format(‘embedded-opentype’)」のままでは、IE9でも.eotが読み込まれます。そこで、「format(‘embedded-opentype’)」をわざと正しくない表記の「format(‘eot’)」にします。すると、IE9で開いたとき、.woffが読み込まれるようになります。

※「format(‘embedded-opentype’)」をわざと間違った記述にする方法はよく用いられます。