mania-ku

何か作りたいプログラマ未満。

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

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

アイコンを用意する

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

フォントにする

OTEDIT for Macで、1文字に1ファイルずつインポート(読んで)サイズなど調整。
新規作成でフォントの太さやフォント名などが聞かれます。
なぜかフォント名は効かなかったけど・・・
保存して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が見たくて、しょうがないです。
ポスターみたら、見たくなりまして。

Pocket
LINEで送る