Ownedmedia ウェブ制作に役立つコンテンツを発信中!

デザイン 2017.08.20

SVGからオリジナルのwebフォントアイコンを作成する

Tags: ,,,
最終更新日:Update

ここ最近ではウェブサイトで使用するアイコンなどのデザイン素材にベクターデータのSVG形式がよく使われるようになってきました。ビットマップに比べて比較的データが軽く、拡大縮小してもクリアに表示されるので、デザインが綺麗に仕上がります。

 

ただし、単体のイメージデータになりますので、大きさを変えたいや色を変えたいとなると、直接SVGのファイルデータを編集する必要があります。そこで、このSVGをwebフォントとして扱いCSSで制御できるようにしていきます。こうすることで汎用性の高いアイコンが使えるようになります。

 

webフォントアイコンにするSVGデータを作成

まずはSVG形式でwebフォントアイコンで使用するアイコンを作成していきます。ベクターデータですのでIllustratorやSketchなどのツールを使って作成していきます。この時にアイコンが複数のパスで構成されている場合は、パス同士を複合パスなどにして1つのオブジェクトにしておきます。こうしておくことでフォントデータに変換した時のズレや歪みを防ぐことができます。

 

SVGからフォントデータへ変換してくれるウェブサービス「IcoMoon」

webフォントとして使えるようにするにはSVGをフォントデータに変換しないといけないのですが、今回は「Icomoon」というwebサービスを利用します。まずはウェブサイト(https://icomoon.io/)にアクセスし、トップページの右上にある「IcoMoon App」のボタンをクリックします。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

画面が切り替わりアイコンを登録するページが表示されます。まずはフォントデータに変換するSVGデータをインポートしていきます。画面左上の「Import Icons」をクリックして先ほど作成したSVGファイルをアップロードしていきます。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

ファイルがアップロードされると項目のところにSVGデータがリストで表示されます。項目右端にあるメニューアイコンをクリックするとサブメニューが表示されるので「View / Edit Info」をクリックしてフォントデータの情報を編集します。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

フォントデータのメタ情報が表示されます。真ん中にある「Edit Metadata」をクリックして情報を編集していきます。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

フォントデータのタイトルや制作者名、サイトURLやライセンス情報などが入力できます。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

次にフォントデータに変換・出力していきます。項目にあるアイコンを出力するもの(今回は全て)をクリックして選択状態にします。そして画面右下にある「Generate Font」をクリックします。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

webフォントデータに変換されたものがプレビューできますので確認します。問題なければ画面右下にある「Download」ボタンをクリックするとフォントデータやCSS一式がダウンロードされます。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

また、この時に画面上部にある「Preferences」をクリックするとフォントデータの詳細設定ができます。CSSで使用するclass名やレガシーブラウザ対応なども設定できます。

 

SVGからオリジナルのwebフォントアイコンを作成する

 

インストールしたデータファイル一式は下記のようになっています。

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フォントアイコンは既存のデザイン素材などにもたくさんありますが、オリジナリティが出せなかったり、欲しいアイコンがなかったりというケースもあるかと思います。そんな時にピッタリの方法なのではないでしょうか。

 

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?