Macでアイコンフォント作成の手順まとめ

  • 投稿日
  • 著者 ituki
  • カテゴリー Design
Pocket
LINEで送る

今日試しにMacでアイコンフォントを作ってみたので、忘れないためにメモ。

アイコンを用意する

イラレでパスを用意して、１アイコンずつSVGに保存します。

フォントにする

OTEDIT for Macで、１文字に１ファイルずつインポート（読んで）サイズなど調整。
新規作成でフォントの太さやフォント名などが聞かれます。
なぜかフォント名は効かなかったけど・・・
保存してTTFにします。

フォントを必要な形式分用意する

実験したときは、eot、woff、ttf、svgを使いました。
下記のツールで変換しました。

CSSで使う

こんな感じで書いて使いました。

@font-face {
	font-family: 'フォント名';
	src: url('フォントURL.eot?#iefix') format('embedded-opentype'), 
	     url('フォントURL.woff') format('woff'), 
	     url('フォントURL.ttf')  format('truetype'),
	     url('フォントURL.svg#svgFontName') format('svg');
}

使いたい要素 {
	font-family: フォント名;	
}

キアヌ・リーヴスが出る47 roninが見たくて、しょうがないです。
ポスターみたら、見たくなりまして。

CSS3 Mac 勉強