最近ずっと作ってきたものがようやくリリース間近になりました。
と言うことで、その中で勉強したことを何回かに分けてブログに書いていこうと思います。
第1回目は「Webフォント」とその応用である「アイコンフォント」について。
「Webフォント」について
前時代的な発想で言うと、フォントというのはパソコンの中に入っているものであり、Webサイトで使うフォントというのはどんな環境にも存在するフォントを選ぶのが常識でしたが、「Webフォント」という概念が出来て変わりました。「Webフォント」というのはフォント自体はWebサーバ上にあって、それを読み出して表示するという仕組みです。「タイムラグがあって、そんなの使い物にならないんじゃないの？」実際に使ってみるまではそう思っていたのですが、実際に使ってみると0.2秒以下の速度で読み出し表示には殆ど影響を与えていませんでした。ユーザーの環境を考えずにフォントを選ぶことが出来るので、本当に便利です。
Webフォントを使うには
このあたりのサイトがわかりやすいので参考にしてみてください。WEBフォントサイトまとめ9選！とりあえず一度使ってみませんか？ | 株式会社LIG
基本的にCSSだけで対応出来ます。簡単。
Webフォントはどこで見つかるか
いろんなサイトがあるんですけど、とりあえずGoogleでいいんじゃないですかね。Google Fonts
CSSファイルに記述するコードも買い出してくれるので、便利です。安心感もあるし。
「アイコンフォント」について
「Webフォント」の応用編。好きなフォントに変えてくれるのであれば、イラストやデザインもフォントに適用出来るんじゃね？というのが「アイコンフォント」の発想。アイコンと言えば通常は画像を使うんですけど、それに比べると、
- 読み出しが軽量
- 色やサイズを自由に変えることが出来る
という点で柔軟にデザイン出来るのがメリットです。
個人的にオススメのアイコンフォントはこれ。
Foundation Icon Fonts 3 | Playground from ZURB
こんな感じになります。
demo
アイコンフォントはほかにも色んなものがあるので、色々探してみてください。
このあたりにとてもよくまとまっています。
Webサイトに利用したい、ピクトグラムの無料アイコンフォント17個まとめPhotoshopVIP |
本当は「Iconic Icon Set」と言うアイコンフォントを使いたかったんですけど、ちょうどKickstarterで資金を集めているところで、有料になってしまったんですよね。リリースノートを見る限り、有料になるだけのクオリティがあるようなので、正式にリリースされたら使っても良いかなとは思いますが、そのあたりは都合に合わせてご検討を。
