アイコン Webフォントを作成する (Webページ用アイコンフォントの作成) - HTML

Webページで表示するためのアイコンWebフォントを作成する手順を紹介します。

概要

Webページでアイコンを表示するために、アイコンの図形のWebフォントを作成します。Webフォントを作成することで、アイコンを文字として扱え、フォントサイズやフォントカラーをアイコンの図形に反映させることができます。

アイコンをフォントで作成するメリット

アイコンをフォントで作成するメリットは次の通りです。

1:ベクタ画像なので拡大縮小に強い

gifやpng形式のラスタ画像の場合、高解像度ディスプレイに対応する場合などは複数の画像を用意する必要がありますが、フォントで作成した場合ベクタ画像で作成できるため、拡大しても画像が荒れずに表示できます。

2:ベクタ画像なのでサイズが小さい

フォントをベクタ画像の図形で作成すれば、フォントサイズが小さくなり、ページの読み込み速度も高速になります。

3:カラー変更も容易

フォントは色のありなし2値で作成し、描画時にフォントカラーを指定して表示するため、色の変更も容易です。

4:カラーフォントも可能

以前は2値のみのフォントしか利用できませんでしたが、Windows8 移行では顔文字フォントのようなカラー付きのフォントも利用できるようになりました。

SVGファイルの作成

アイコンWebフォントの文字として表示する図形を作成します。図形はSVGファイルで準備します。今回は下図の図形を準備します。

SVGファイルで書き出します。フォントはアウトライン化してベクターの図形として書き出します。

Webフォントの作成

FontForge, IcoMoon などのフォント編集ソフトウェアを利用してWebフォントを作成します。

FontCreator によるWebフォントの作成

FontCreatorによるアイコンフォント作成の手順はこちらの記事を参照してください。

FontForge によるWebフォントの作成

FontForgeによるアイコン作成の手順はこちらの記事を参照して下さい。

IcoMoon によるWebフォントの作成

IcoMoonと呼ばれるWebアプリを利用してWebフォントを作成します。https://icomoon.ioにアクセスします。作成手順はこちらの記事を参照して下さい。

作成したWebフォントの利用

作成したWebフォントをWebページで表示します。作成したWebフォントをWebサイトに配置します。今回はfontsディレクトリ内にWebフォントを配置します。

コード

下記のHTMLファイル、CSSファイルを作成します。
フォントの定義は用意できたフォントファイルの形式により変わってきます。

iconfonts.css

@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.eot');
  src: url('fonts/iconfont.eot') format('embedded-opentype'), 
       url('fonts/iconfont.ttf') format('truetype'), 
       url('fonts/iconfont.woff') format('woff'), 
       url('fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.iconfont-text{
  margin-top:8px;

  font-family:iconfont;
  color:#ff6a00;
  font-size:32px;
}

iconfonts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="iconfont.css" />
</head>
<body>
  <div class="iconfont-text">&#xe900</div>
  <div class="iconfont-text">&#xe901</div>
</body>
</html>

解説

フォントとして、eot, ttf, woff, svg 形式が用意できた場合は下記の書式となります。

@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.eot');
  src: url('fonts/iconfont.eot') format('embedded-opentype'), 
       url('fonts/iconfont.ttf') format('truetype'), 
       url('fonts/iconfont.woff') format('woff'), 
       url('fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

ttf,woff,woff2 形式のフォントファイルが利用できた場合は下記の書式となります。

@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.woff2');
  src: url('fonts/iconfont.ttf') format('truetype'), 
       url('fonts/iconfont.woff') format('woff'), 
       url('fonts/iconfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-faceでWebフォントの読み込みとfont-familyの宣言をします。iconfont-textクラスを宣言し表示フォントを@font-faceで宣言したiconfontに設定します。

CSSの@font-faceのフォント読み込み部分はWebフォントが更新された際にキャッシュヒットしないようにするため、フォントのURLに乱数の文字列のパラメータを付加して記述する場合もあります。Webフォントの更新が発生した場合にパラメーターの"random_string"の部分も変更しWebフォントが再読み込みされるようにします。

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

HTMLファイルでの文字表示はUnicodeの文字コードをエスケープして記述します。HTMLでのUnicodeの文字コードのエスケープの書式は下記になります。

&#x(Unicodeの文字コードの16進数表記)

"e900"と"e901"の文字コードの文字を表示するため、HTMLファイルでの記述は下記になります。

  <div class="iconfont-text">&amp;#xe900</div>
  <div class="iconfont-text">&amp;#xe901</div>

表示結果

作成したHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。作成したSVGの図形が表示されます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次