WEBフォントとは、PCなどにインストールするような「フォント」を、WEBページ上で使えるようにする仕組みのことだ。

画像などと同じようにサーバーにフォントファイルを設置し、クライアント（閲覧者）に読み込ませることで、PCなどにインストールされていないフォントをWEBページで表示可能になる。

WEBデザインの幅が広がるなどの様々な利点があるが、導入するのは面倒というイメージもある。

俺のサイトでも導入したいと考えてるんだが。

※この記事にはInternet Explorerに対する悪口が含まれます。Microsoft関係者の方はご注意ください。

WEBフォントの利点

WEBフォントを利用する利点は、以下のようなものだ。

  • PCに入っていない独特なフォントが使える。
  • どの環境でも同じフォントを表示できる。
  • アイコン用フォントを画像のように使える。

一つ目は、PCなどに同梱されていないフォントを使うことで、WEBサイトのデザインの幅が広がるという点。

装飾フォントなどで目を引くデザインが可能になる。

もちろん可読性には気をつけなければならないが、それほど重要でない部分なら構わないだろう。

ページのヘッダーなどでロゴ代わりにすることもできる。

二つ目は、PCでもスマホでも全く同じ表示が可能になるという点。

PCのフォントとスマホのフォントは大きく異なり、文字の大きさなどが合わないせいで、CSSをどんなに調整しても双方で思い通りの表示にするのは難しい。

それに、スマホではユーザーがフォントをインストールすることはほぼ不可能である。

WEBフォントはWEBサーバーによって提供され、ブラウザで表示するので、クライアントはフォントをインストールすることなく利用できる。

三つ目は、アイコン画像として利用することを前提としたフォントを利用することで、WEBサイト上のちょっとしたアイコン画像を文字として表示させることが可能になる。

見た目は画像でもフォントなので、色や大きさを変えることができ、拡大しても画質が劣化せず、高解像度の最新端末でもクリアに表示できる。

いまいちピンとこない人のために例を挙げると、Twitterのサイトの上部中央にある青い鳥のアイコン、あれはWEBフォント、つまり文字だ。

ちなみに、“”（  ）という文字なんだが、ここでは対応するフォントがないから当然文字化けするよね。

WEBフォントは重い？

フォントファイルといえば、サイズがすごく大きいというイメージはないだろうか。

たとえば、このサイトでメインフォントに指定している、Windows標準搭載の「メイリオ」は、標準（太字でも斜体でもない）だけで9.09 MBくらいある。

Windowsのブラウザ標準の「MS Pゴシック」も8.78 MBだし。

9 MBって、画像でいえば相当巨大なファイルなわけで。

こんな大きなファイルをダウンロードさせていては、重いページになるのではないか。

実際はそんなに気になるほど重くはないけどね。

ところで、上記のフォントが重いのは、日本語対応フォントだからだ。

このサイトで「ソースコード表示」に指定している「Consolas」は欧文フォントだから、たった349 KBしかない。

日本語フォントには漢字があるから、大量の文字を収録しなければならないのだ。

もっとも、このサイトでは普通の文字にWEBフォントを使っているわけではなく、上記のフォントはいずれもユーザーの環境にインストールされているものを使っている。

もちろん、スマホにそれらのフォントはないから、スマホのフォントで表示されるのだが。

一方、アイコン用フォントは文字数が限られていることもあり、とても軽い。

このサイトで現在導入に向けテストしているアイコン用フォントは、42個のアイコンを含み、6 KB未満となっている。

下手をすれば普通のアイコン画像よりも軽い。

俺の導入事例

このサイトで導入するのは、フリーのフォント向けアイコンを提供しているIcoMoonで入手したアイコンフォントだ。

IcoMoonでは、多くのアイコンの中から利用したいものを選び、自由に組み合わせてフォントファイルを生成できるので、（サイズ的に）無駄のないフォントファイルを利用できる。

英語サイトなので、利用の際にはちょっと戸惑うかも。

そうして入手したフォントファイルを収めたZIPフォルダ内に、CSSが入っているので、その内容をこのサイトのCSSに追加。

その際、 @font-face ルールと呼ばれる記述によって独自のフォントを定義するのだが、このサイトでは以下のようになっている。

※このサイトでは元のソースコードをかなりアレンジしている、以下同じ。

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

左右にスクロールして全部表示できるよ。

2行目ではフォントの名前を定義している。

3行目は古いIE用のフォントファイルの指定だ。

4行目では古いIEへの対策として“?”を含めている。

5行目はモダン（今どきの）ブラウザ用のフォントファイル。

6行目は主にAndroid用のフォントファイル。

なお、この記述は以下のサイト様を参考にした。
WebフォントのCSS指定2014年度版とこれまでの歩み - WEBCRE8.jp

さて、ソースを見ての通り、icomoon.eot / icomoon.woff / icomoon.ttf の三つのフォントファイルを使用しているが、IcoMoonで入手したZIPフォルダには三つとも収録されているので、それらを適切な場所にアップロードし、それに合わせて上のソースのURL部分を変更しよう。

 

次にアイコンフォント表示部分のCSSの記述だ。

.icon {
    font-family: 'icomoon';
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    cursor: text;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

左右にスクロールして全部表示できるよ。

ここではそれほど大したことはしていない。

こんなものだと思ってもらえれば。

ちなみに下のほうの2行は、フォントの描画をきれいにするための“おまじない”だ。

 

さらに、フォントの“実体”を表示するためのCSSの記述が、以下の通りだ。

.icomoon-xxxx:before { content: '\0000'; }

左右にスクロールして（以下略）

xxxx の部分に、アイコンの名前を入れる。

0000 の部分に、アイコンの文字コードを入れる。

いずれも、ZIPファイルに同梱されているCSSに含まれている通りに。

もしくは、同じく同梱のデモ用HTMLファイルにもっとわかりやすく書いてある（ただし英語）。

この記述はフォントファイルに含まれるアイコンの数だけ必要になるので、一行ずつ書いていく。

 

最後に、実際にHTML内でアイコンフォントを使う方法だが、上記のCSSの記述に沿って以下のように書く。

<span class="icon icomoon-xxxx"></span>

左右にスク（以下略）

このコードを書いた位置に、アイコン文字が表示される。

xxxx の部分には、上と同じくアイコンの名前を入れる。

<span> タグの中身が空じゃん！　と思ったあなた。

文字の実体は、CSSの :before 疑似要素で指定しているからHTMLには書かなくていいのだよ。

ところで、 <span> タグと icon クラスのかわりに <i> タグを使う人が多いようだが、この方法では上のCSSはより簡単になるし、HTMLも短くなるんだけど、俺は <i> タグを本来の用途以外には使いたくない（HTML5ではタグに意味と用途が定められている）ので <span> タグとクラスを使っている。

安定のIE対策

お待たせしました、恒例のIEディスりタイムだよ。

なんだけど、なんとWEBフォントってのは、IE4くらいから対応しているのだ。

古いIEでもバッチリ表示してくれる。

……と言いたいところだが。

IE7以下はCSSの疑似要素に対応していない！

さすが糞ブラウザIE様！　期待を裏切らない！

というわけで、またしても俺たちWEB開発者は苦しめられるのだ。

いや……今どきIE7以下を使ってる奴なんてほぼ皆無だけど。

Windows XPでもIE8が使えるからね。

それでも気になる人は、一緒にIE7対策をしよう。

IcoMoonで生成したフォントをダウンロードする前に、設定みたいなところ（Preferences）をクリックするとフォントの設定がいろいろできるんだけど、その中の「Support IE 7 & IE 6」にチェックを入れると、ダウンロードするZIPフォルダの中に「ie7」というフォルダが現れる。

その中の「ie7.css」と「ie7.js」をサーバーにアップロードして、以下のようにHTMLの<head>〜</head>内で読み込めばIE7対策は完了！　らしい。

<!--[if lt IE 8]><!-->
    <script type="text/javascript" src="js/ie7.js"></script>
    <link rel="stylesheet" type="text/css" href="css/ie7.css">
<!--<![endif]-->

左右に（以下略）

IEの条件付きコメントという仕組みを使い、IE7以下（およびIE10以降）、それとIE以外のブラウザのみにこれらを読み込ませる。

そしてIE以外のブラウザでは何も起こらず無視される。

……でも、IE以外のブラウザに余計なファイルを読み込ませたくないなあ。

そもそもIE7は疑似要素に対応してないだけなんだから、疑似要素を使わずにHTMLで文字の実体参照でもすればいいんじゃね？

実体参照とは、たとえば「&」のことを &amp; と書いて表す方法のことだ。

ここでやりたいことは厳密には実体参照ではなく「文字参照」と呼ぶようだが、まあつまり上のCSS（三つ目）で content: '\0000'; としていたのを、代わりにHTMLに &#x0000; と書くというわけだ。

0000 の部分は共通である。

この方法を使えば、HTML部分は以下のようになる。

<span class="icon">&#x0000;</span>

左右（以下略）

今度は <span> タグが空っぽじゃない！

つまり疑似要素を使っていないから、上記のIE7対策のCSSやJavaScriptを使わなくてもIE7以下にバッチリ対応するのだ。

いちいち文字参照のための文字コードをチェックするのが面倒な人は上の方法を使えばいいけど、この二つの方法は共存できるので、使い分けてもいい。

2016年1月にIE8以下がまとめてサポート終了するらしいから、それまでの辛抱と言えなくもない……

参考：Tech TIPS：各Windows OSで利用できるIEのバージョンを知る - ＠IT

※サポートが切れていない最も古いWindows OSであるWindows VistaにおけるIEの最終バージョンが9なため。

このリンク先の記事を見て思ったんだけど、まだサポートが切れてないWindows VistaのIEの初期バージョンが7ってことは、IE7以降はまだサポートされてるってことか。

早く2016年1月になれよ！

IEも9以降になるとだいぶマシだからな。

テスト版ページ

このサイトにWEBフォントを導入するために現在テスト中なんだが……

あまり他人に見せるようなページでもないが……テスト中のページでも見てみる？

開発用 – 単独記事ページ

※リンク先のページではいろんなテストをしており、内容は全くのデタラメです。
※あなたがこの記事を読んでいるときにはすでにWEBフォントがサイト全体に導入済みかもしれない。

ページ上部の「投稿日」の辺りや、ソースコード部分、引用部分、「前後の記事」の部分にアイコンフォントが使われている。

うち、ソースコード部分と引用部分ではCSSの疑似要素を、その他の部分ではHTMLの文字参照を使っている。

まとめ

今回はWEBデザインの幅を広げるWEBフォントの仕組みと、アイコンフォントの導入方法を紹介した。

このサイトではアイコンのみの導入だけど、もちろんページの文字全部をWEBフォントにすることもできる。

あなたもWEBフォントでグッドデザインを作ってみてはいかがだろうか！

あ、フォントファイルをWEBフォントとして公開するにはライセンスの問題もあるから、そのあたりはご注意を。