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

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

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

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram