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

作成日:

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

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

②「Import Icons」をクリックして、用意していおいたロゴデザイン(SVGファイル)をインポートします。
2013-11-27_22h55_38_compressed

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

⑤「Font」ボタンをクリックします。
2013-11-27_22h55_56_compressed

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

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

⑧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フォントとして表示されるようになります。

Icon Font & SVG Icon Sets ❍ IcoMoon http://icomoon.io/

IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。