SVGからオリジナルのwebフォントアイコンを作成する
ここ最近ではウェブサイトで使用するアイコンなどのデザイン素材にベクターデータのSVG形式がよく使われるようになってきました。ビットマップに比べて比較的データが軽く、拡大縮小してもクリアに表示されるので、デザインが綺麗に仕上がります。
ただし、単体のイメージデータになりますので、大きさを変えたいや色を変えたいとなると、直接SVGのファイルデータを編集する必要があります。そこで、このSVGをwebフォントとして扱いCSSで制御できるようにしていきます。こうすることで汎用性の高いアイコンが使えるようになります。
画面が切り替わりアイコンを登録するページが表示されます。まずはフォントデータに変換するSVGデータをインポートしていきます。画面左上の「Import Icons」をクリックして先ほど作成したSVGファイルをアップロードしていきます。
ファイルがアップロードされると項目のところにSVGデータがリストで表示されます。項目右端にあるメニューアイコンをクリックするとサブメニューが表示されるので「View / Edit Info」をクリックしてフォントデータの情報を編集します。
フォントデータのメタ情報が表示されます。真ん中にある「Edit Metadata」をクリックして情報を編集していきます。
フォントデータのタイトルや制作者名、サイトURLやライセンス情報などが入力できます。
次にフォントデータに変換・出力していきます。項目にあるアイコンを出力するもの（今回は全て）をクリックして選択状態にします。そして画面右下にある「Generate Font」をクリックします。
webフォントデータに変換されたものがプレビューできますので確認します。問題なければ画面右下にある「Download」ボタンをクリックするとフォントデータやCSS一式がダウンロードされます。
また、この時に画面上部にある「Preferences」をクリックするとフォントデータの詳細設定ができます。CSSで使用するclass名やレガシーブラウザ対応なども設定できます。
インストールしたデータファイル一式は下記のようになっています。
demo-files フォルダ
demo.html
fonts フォルダ
Readme.txt
selection.json
style.css
そのうち使用するのは、「fonts フォルダ」「style.css」の2つになります。このファイルとフォルダをサイト内のディレクトリに配置しますが、「style.css」にあるフォントデータ参照パスは適宜変更します。下記にあるように、eotファイル、svgファイル、ttfファイル、woffファイルの4つが対象になります。
【style.css】※一部抜粋
[code lang="css"]
@font-face {
font-family: 'samplefont';
src: url('fonts/samplefont.eot?mwhr8z');
src: url('fonts/samplefont.eot?mwhr8z#iefix') format('embedded-opentype'),
url('fonts/samplefont.ttf?mwhr8z') format('truetype'),
url('fonts/samplefont.woff?mwhr8z') format('woff'),
url('fonts/samplefont.svg?mwhr8z#blogdeco') format('svg');
font-weight: normal;
font-style: normal;
}
[/code]
あとはサンプルのCSSを参考にコーディングすることでサイトにwebフォントアイコンが表示できるようになります。
webフォントアイコンは既存のデザイン素材などにもたくさんありますが、オリジナリティが出せなかったり、欲しいアイコンがなかったりというケースもあるかと思います。そんな時にピッタリの方法なのではないでしょうか。
webフォントアイコンにするSVGデータを作成
まずはSVG形式でwebフォントアイコンで使用するアイコンを作成していきます。ベクターデータですのでIllustratorやSketchなどのツールを使って作成していきます。この時にアイコンが複数のパスで構成されている場合は、パス同士を複合パスなどにして1つのオブジェクトにしておきます。こうしておくことでフォントデータに変換した時のズレや歪みを防ぐことができます。SVGからフォントデータへ変換してくれるウェブサービス「IcoMoon」
webフォントとして使えるようにするにはSVGをフォントデータに変換しないといけないのですが、今回は「Icomoon」というwebサービスを利用します。まずはウェブサイト（https://icomoon.io/）にアクセスし、トップページの右上にある「IcoMoon App」のボタンをクリックします。
画面が切り替わりアイコンを登録するページが表示されます。まずはフォントデータに変換するSVGデータをインポートしていきます。画面左上の「Import Icons」をクリックして先ほど作成したSVGファイルをアップロードしていきます。
ファイルがアップロードされると項目のところにSVGデータがリストで表示されます。項目右端にあるメニューアイコンをクリックするとサブメニューが表示されるので「View / Edit Info」をクリックしてフォントデータの情報を編集します。
フォントデータのメタ情報が表示されます。真ん中にある「Edit Metadata」をクリックして情報を編集していきます。
フォントデータのタイトルや制作者名、サイトURLやライセンス情報などが入力できます。
次にフォントデータに変換・出力していきます。項目にあるアイコンを出力するもの（今回は全て）をクリックして選択状態にします。そして画面右下にある「Generate Font」をクリックします。
webフォントデータに変換されたものがプレビューできますので確認します。問題なければ画面右下にある「Download」ボタンをクリックするとフォントデータやCSS一式がダウンロードされます。
また、この時に画面上部にある「Preferences」をクリックするとフォントデータの詳細設定ができます。CSSで使用するclass名やレガシーブラウザ対応なども設定できます。
インストールしたデータファイル一式は下記のようになっています。
demo-files フォルダ
demo.html
fonts フォルダ
Readme.txt
selection.json
style.css
そのうち使用するのは、「fonts フォルダ」「style.css」の2つになります。このファイルとフォルダをサイト内のディレクトリに配置しますが、「style.css」にあるフォントデータ参照パスは適宜変更します。下記にあるように、eotファイル、svgファイル、ttfファイル、woffファイルの4つが対象になります。
【style.css】※一部抜粋
[code lang="css"]
@font-face {
font-family: 'samplefont';
src: url('fonts/samplefont.eot?mwhr8z');
src: url('fonts/samplefont.eot?mwhr8z#iefix') format('embedded-opentype'),
url('fonts/samplefont.ttf?mwhr8z') format('truetype'),
url('fonts/samplefont.woff?mwhr8z') format('woff'),
url('fonts/samplefont.svg?mwhr8z#blogdeco') format('svg');
font-weight: normal;
font-style: normal;
}
[/code]
あとはサンプルのCSSを参考にコーディングすることでサイトにwebフォントアイコンが表示できるようになります。
webフォントアイコンは既存のデザイン素材などにもたくさんありますが、オリジナリティが出せなかったり、欲しいアイコンがなかったりというケースもあるかと思います。そんな時にピッタリの方法なのではないでしょうか。
