• かちびと.net

    ミニマルなアイコンやシンボルをWebフォントで表現するために作られたフリーフォント・Web Symbols typefaceのご紹介。シンプルですし、ちょっとした場所に使うなら楽でいいかもですねー。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

以前、シンボルやアイコンタイプのフォントをご紹介しましたが、こちらは最初からWebフォントとして使う目的で作ったそうです。

Web Symbols typeface


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


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


こんな感じで使う。

css

@font-face{
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}

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

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

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

画像を使用しないので、上手く使えば高速化にも繋がりますね。ちょっとどこかで試したいんですが、ライセンスの明記が無いので後でメールで確認ですかね。

ライセンスを問い合わせました。
Open Font License(OFL)との事です。
安心して使用できますねー!

Web Symbols typeface(via:webresourcesdepot)

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services