[font]使いたいアイコンフォントが選べて、自作も可能なWEBフォントのオンラインツール

このサイトのヘッダーで使用しているWEBフォントはFontasticで作成しまいた。 以前はFont Awesomeを使っていましたが、こちらの方が種類がおおく、使いやすいので最近よく利用しています。

5パターンまで、選んだフォントアイコンが登録可能なので、同じフォントを使用したいときはいつでもログインすると使用できるようです。

自作のフォントアイコンを作成し利用することも可能ですが今回は最初からおいてあるフォントアイコンの設定方法を説明します。

WEBフォントアイコンの作成方法

1.まずはTOPページでメールアドレスとパスワードを入力します。

WEBフォント

2.入力が完了するとSELECTページに移動するので、使用したいアイコンフォントを選択します。

WEBフォント

3.次にCUSTOMIZEに移動し、キーの割り当てや表示させる時のクラス名を入力します。

WEBフォント

4.あとはダウンロードするだけですが、このままダウンロードすると、
フォント名が「Untitled font」になってしまうので、右上のFont Settingsをクリックしオリジナルのフォント名を決めましょー。

WEBフォント

Font Settingsのキャプチャーです。名前が決まれば「SAVE」をクリック!

WEBフォント

5.DOWNLOADボタンをクリックすると、選択したWEBフォントがダウンロードされます。
使用方法はこのダウンロードのページの下にいくと記載があります。

WEBフォント

5.ダウンロードページに記載されているCSSか、ダウンロード時に一緒に入っているCSSをそのまま読み込んで、下記の用に設定すると表示されます!

WEBフォント

こんな感じで表示されます。↓↓↓

今回紹介したサイト↓↓↓

Fontastic

http://fontastic.me/
SITE:Fontastic

LATEST ENTRY - 新着記事 -

CATEGORY - カテゴリ一覧 -