WEBフォントCONDENSE-iconFontを使ってアイコンボタンを作ってみた

GIGAZINEさんやLife Hackerさんで取り上げられ、話題になっていますが、大分県で活躍されているデザイン事務所CONDENSEさんから、すばらしいWEBフォントが公開されました。

スマホサイトのボタンを設置する場合、１つずつ画像を作ったり、CSS SpriteでCSSを指定するというのも面倒なときがあります。
そんなときに、このWebフォントを使うと、フォント名を指定し、CSSで飾りをつけるだけで、画像の処理を行わず、アイコンを作ることができます。

ダウンロード
ライセンス
フォントファイル
CSSの設定
CSSだけで、アイコンボタンを作成

ダウンロード

CONDENSE-iconFontのダウンロードはこちらから

ライセンス

「営利、非営利問わず自由に使用できます。但し、再配布は禁止しています。」
とのことで、WEB制作にも自由に使えますね。

フォントファイル

ダウンロードしたファイルを解凍すると、
CONDENSEicon.woff
CONDENSEicon.tff
CONDENSEicon.otf
CONDENSEicon.eot

の４つのファイルができます。FTPソフトなどを使って、これらのファイルをサーバーにアップします。

CSSの設定

@font-face規則のfont-familyでWebフォントとして使用するフォントファミリ名を「condenseicon」として定義しました。
そして、文字アイコン用のclass mojiiconを作ってみました。

/*font-face*/
@font-face{
	font-family:'condenseicon';
	src: url('/font/CONDENSEicon.ttf') format('truetype'),url('/font/CONDENSEicon.otf') format('opentype'),url('/font/CONDENSEicon.woff') format('woff');
}

/*フォントの指定*/
.mojiicon{
   font-family:'condenseicon';
  /*以下、ボタンっぽく見せるためのスタイル設定*/
  font-weight:bold;
  font-size:32px;
  background-color:#5ca02f;
  color:#fff;
  border:2px solid #5ca02f;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding:5px;
}