IconMoonでロゴをWEBフォントにしてみます。

まずはロゴにしたいSVGファイルをIllustratorなどで作成しておきます。ファイルは全てアウトライン化しておきます。

①IconMoonのAppにアクセスして、「Start the App」ボタンをクリックします。

②「Import Icons」をクリックして、用意していおいたロゴデザイン（SVGファイル）をインポートします。

③Selsectツールをクリックして、④インポートしたロゴデザインを選択します。今回はロゴデザインのみをフォント変換する予定ですが、複数のSVGファイルをインポートしてまとめることも出来ます。

⑤「Font」ボタンをクリックします。

⑥「Download」ボタンをクリックして、zipファイルをダウンロードします。

⑦ダウンロードしたzipファイルを解凍すると、フォントファイル一式と設定用のスタイルシート、確認用のデモファイルが含まれています。

⑧style.cssの中を見ますと以下のようになっています。[css]@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-logo:before {
content: "e600";
}[/css]

⑨ロゴフォントを表示させたい箇所で、[html]...[/html]と書いてあげれば、オリジナルのロゴデザインがWEBフォントとして表示されるようになります。