webフォントとアイコンフォントを使ってみました。

Pocket

更新などを担当しています、岩井です。

 話題(ちょっとおそい?webフォント・アイコンフォントを使ってみました!

検索してみるとwebフォントもアイコンフォントも無料で提供されているサイトがいくつかありました。 今回はこちらを使ってみようと思います。

 

webフォント http://mplus.font-face.jp/

アイコンフォント http://fontello.com/

 

webフォント


font_01

こちらのサイトは商用利用可で、使いたい文字だけをダウンロードできます。

使い方も単純で、フォントタイプを選択、変換したい文字を入力。

変換ボタンをクリック!!

zipファイルを解凍してスクリーンショット 2014-01-27 18.19.49を配置。

スクリーンショット 2014-01-27 17.19.20

変換後に表示されるコードをコピーしてcssに。

ディレクトリは適宜かきかえてください。

 

@font-faceって??

webフォントを指定するための規則を提供。

ユーザーのコンピュータにインストールしているフォント数に依存する必要性を排除する。

、、、そうです。

 

​あとはhtmlに変換した文字を入力するだけです!!

今回は指定した文字のみのダウンロードなので問題ないのですが、webフォントで検索すると"重い"というワードが目立ちます、、便利なんですけどね。

 

アイコンフォント

icon_01

 

使いたいアイコンを選択

02

 

選択を解除する際はここから!

07 

 

クラス名を変更できます。03

 

キーボードのどの文字に相当するのかを決めます。

04

 

ダウンロードをクリック!!ファイルが生成されますので、任意の位置に配置。

fontello.cssを読み込みます。

06

 

アイコンを表示するにはhtmlに以下のように記述したり、

スクリーンショット 2014-01-28 16.31.08

 

CSSでcontentにダウンロード時に割り当てたアルファベットを記述といった方法があります。

スクリーンショット 2014-01-28 16.37.55

上にあるように色をかえたり、CSS3を使って影をつけたり、アニメーションをつけることができます。

 

アイコンフォントを検索していたら、こんなのも発見しました!!

Appleのmac30周年のサイトです。アイコンフォントが使われてます。

スクリーンショット 2014-01-28 17.20.18

インストールもできますよ〜