パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

Fontelloでオリジナルのフォントセットを作る

2016年02月24日

Webサイトでデザインのアクセントにアイコンを使う場合、以前はわざわざPhotoshopなどで画像を切り出して、cssで背景画像に指定して...なんてことをやらないと表現できませんでしたが、近年はブラウザの対応が進んだこともあって、Webフォントでアイコンを表現する機会が増えてきました。
フリーで使えるアイコンフォントの種類も年々増えてきていますし、Bootstrapのようなcssフレームワークでもアイコンフォントは大抵用意されているので、だいぶ導入がしやすくなってきましたね。

しかしそんな便利なアイコンフォントも、それぞれ用意されているアイコンのテイストが微妙に違っていたりして、こっちのコレだけ使いたいなあ...とか、他は全部そろってるのにアレだけない...、など、かゆいところに手が届きそうで届かなかったりします。
そんな時に便利なのが、自分が欲しいアイコンだけでフォントファイルが作成できるFontelloというサービス。

fontello_01.jpg

登録された様々なフォントから、好きなアイコンだけを抜き出したフォントセットを作ったり、自分で作ったSVGファイルを登録して合わせて使うなんてことも可能です。

使い方その1:フォントセットを作る

まずはFontelloへアクセスして、使いたいアイコンを選択します。

fontello_02.jpg

1つずつクリックで選択していくことも可能ですし、ドラッグすると選択範囲のアイコンをまとめて選択できます。
フォントは各フォントセットごとに並んでいて、それぞれのフォント名のところに許諾ライセンスや本家サイトの情報などがありますので、そちらも参考にして選びましょう。

次に、右上にあるスパナのアイコンボタンをクリックして、設定パネルを開きます。

fontello_03.jpg

CSS prefixは、アイコンを使用する際に使うclass名の先頭に付くテキストですが、デフォルトでは「icon-」となっています。Bootstrapなどcssフレームワークを利用していると、class名が重複してしまう可能性があるので、そういった場合はここを変更します。

fontello_04.jpg

また、ページ上部の「Customize Names」タブを開くと、それぞれのフォント名の、prefix以下を変更することができるので、自分の好みの名前に変更することも可能です。

使い方その2:フォントセットをダウンロードする

右上のフォント名入力欄にフォント名を入力して、ダウンロードボタンをクリックすると、フォントデータを含めたファイル一式がダウンロードされます。
フォント名を何も設定しないと、fontelloというフォント名がデフォルトで設定されるようです。

fontello_05.jpg

使い方その3:ファイルを配置する

ダウンロードしたファイルのうち、「font」「css」フォルダをサーバへアップロードします。
「css」フォルダには用途に合わせて複数のcssが格納されていますが、基本的には「フォント名-font.css」というcssがあれば問題ありません。
設置場所を変える場合は、css内のパスも適宜変更してください。

ファイルを設置したら、htmlに設置したcssを読み込む指定を追加します。


<link rel="stylesheet" href="file/path/フォント名-font.css">

使い方その4:フォントセットを配置する

それではいよいよアイコンフォントを使ってみましょう。
ダウンロードしたハートのアイコンを表示させてみます。


<p><i class="my-icon-heart"></i>ハート</p>

試しにこんな感じで書いてみました。
「my-icon」の部分は、それぞれ設定したフォント名になります。

ハート

きちんと表示されましたね。
フォントなので、もちろんサイズやカラーも自由に変更できます。

ハート

css名が分からなくなったら、ダウンロードしたファイルに同梱されているdemo.htmlをブラウザで開くと設定が確認できます。
また、demo.html右上の「show codes」を選択すると、各アイコンのUnicodeが表示されるので、これを利用すればcssを使わずにテキストとして使用することもできます。

fontello_06.jpg


<p><span style="font-family:pensees-font;">&#xe801;</span>Unicodeで表示したハート</p>

Unicodeで表示したハート

まとめ

必要なアイコンだけをまとめたファイルを作っておけば、閲覧時のロード時間短縮にもなりますし、自作のSVGファイルと組み合わせて、サイトのデザインに合わせてうまく利用できると、かなり効果が期待できると思います。
ぜひ試してみてください。

仕事のご依頼・お問い合わせ

この記事を書いた人
nagano

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績