0%

Designデザインワークショップ

Posted:2017.08.20

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

ここ最近ではウェブサイトで使用するアイコンなどのデザイン素材にベクターデータの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】※一部抜粋


@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;
}

 

あとはサンプルのCSSを参考にコーディングすることでサイトにwebフォントアイコンが表示できるようになります。

 


 

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

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】