あなたのサイトに自由なフォントをもたらすCSS3のWebフォントまとめ

sodeyama.s
デザインにこだわりたい、文字にこだわりたい、Webデザイナー必見。Webフォントに関するまとめサイトが散見しているのでNAVERまとめに集約します。個人的な探検ログも追記していきます。

CSS3のWebフォント機能では、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントを表示できるようになります。
適用方法も簡単で、使用したいフォントファイルをサーバーにアップロード、またはフォント提供してくれる第三者サーバにあるフォントへの絶対パスを、CSS3の@font-faceでフォントファイルを指定し読み込ませるだけで利用できます。
ちなみに、非対応ブラウザもあるのでは?と思う方に朗報、html5.jsというJavascriptを読み込ませることで、たいていのブラウザで標準化できるっぽいです。

▼欧文フォント

無料

Google様。
わかりやすさ、つかいやすさ、選びやすさ、No1です。
すべて無料。

フリープラン:$0
フォント数:7000以上!

Webフォントでは有名なサイト。
有料プランもあります。($10/30days、$100/30days)
ヘルベチカも使えるらしいです。
どんなライセンス契約結んでるんでしょうか。

無料
フォント数:1500以上

ここもかなりの数です。
個人クリエーターが自作フォントをあげているのかな?
探せばユニークなフォントがたくさん見つかります。

$0〜$50(ファミリー揃えると$300くらいいっちゃう場合も)
フォント数:3000以上

個人に近い業者がフォントを売っているポータルECサイトといったものです。
@Font-Face Demoで大小サイズでの見え方を確認できます。
DL式売切り型なのでDTPにも使えます。
ゴシック系はきれいなフォントが多いかも。
フルティガーっぽい無料フォント見つけました。

▼和文フォント

WEBフォントでリュウミンなどが使えるようになりました。

無料トライアル:1000PV/月
ほか、120万PV/年:16900円〜

個人向けライトプラン:315円/月〜
フォント数:約330種類

無料プランもありますが使えるフォントがかなり限られます。
和文フォントのWebフォントって貴重ですよね。

モリサワ、イワタ、フォントワークス、モトヤのフォントが使えるようになりました!
1年間12,600円〜

ヨモツネット様より。
Webフォントとして利用できるフリーの和文フォントをまとめていただいています。

WebフォントはOTFフォントなら何でも使えるので、
結局はライセンス的にOKか確認できればお手持ちのフォントも使えるという事になります。

試用版:無料

うっつくしいAxisフォント。
DL型フォントで、ライセンスは確認済み。
試用版は無料ですが4200文字入っているので十分です。

和文フォントの中に入っている英文フォントって、
そのまま使えないの多いですよね。
特に文字間が不揃いすぎてイィーーー!ってなったりします。
Axisフォントはほんとに和文・英文ともに、またセットで組んでも美しいです。
CSSのLetter-Spacingで文字間に余白なんか持たせちゃった入りすればオシャレ度UP間違いなしです。
タイポグラフィにこだわっている方にもお勧め。

▼アイコン系フォント

無料

例えば「A」をタイプするとクリップのアイコンに変えてくれる。
画像と違ってCSS3で拡大してもギザギザにならない!
この性質を利用して下記リンクのようなバナーアイコンを実現できちゃいます。

▶Creative CSS3 Animation Menus
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

$30
412アイコン!

ここの買えばよかった・・・
412個もアイコンデザインよくでてくるなあ。
FreeTrialでも58個はいってます。

パーソナルプラン:$19/1年

なかなか質が高い。円高だから1500円か。安いな。

商用利用の場合有料:$25

かわいらしいアイコンがそろってます。
18pxまでの縮小が可能。

無料

ドイツのサイトから。
けっこうスタイル出てますね♪

無料

こちらもドイツから。

無料

ドイツラッシュです。
ソーシャル系アイコンです。
font colorを設定するとよりかわいくなるっぽいです。

https://matome.naver.jp/odai/2132880259264021001
2013年01月23日