font01
0

ミニマルなアイコンやシンボルをWebフォントで表現するために作られたフリーフォント

【勉強用資料】

ちょっと面白かったのでメモ。ミニマルなアイコンやシンボルをWebフォントとして使えるようにしてくれたフリーフォント、Web Symbols typefaceのご紹介です。割と嬉しいかもwこちらは最初からWebフォントとして使う目的で作ったそうです。

Web Symbols typeface


アイコンをWebフォントにすることで、毎回アートディレクターにスライス等を頼まずにすむんや!って言ってました。


あんまり大きいサイズにするとちょっとアレですけどね・・ミニアイコンとして使うことのほうが多そうなのであんまり気にならないかな。css3でエフェクトをつけるのも面白いかもです。


こんな感じで使う。

css

1 @font-face{
2   font-family: 'MyWebFont';
3   src: url('WebFont.eot');
4   src: url('WebFont.eot?#iefix') format('embedded-opentype'),
5        url('WebFont.woff') format('woff'),
6        url('WebFont.ttf') format('truetype'),
7        url('WebFont.svg#webfont') format('svg');
8 }

IE用もセットになってます。フォントをサーバーにアップロードして上記のように書きます。URLはフォントの置き場所に応じて便宜変更してくださいね。

で、font-familyに’WebFont’を指定すればいい

1 p { font-family: 'WebFont', Arial, sans-serif; }

画像を使用しないので、上手く使えば高速化にも繋がりますね。ちょっとどこかで試したいんですがライセンスを問い合わせました。

Open Font License(OFL)との事です。
安心して使用できますねー!

Web Symbols typeface(via:webresourcesdepot)