ページで使われているフォントを調べたり、試したりする事が出来る『Font Face Ninja』が素敵!

ツール

先日、ふと気になったのですが、英語版Twitterのフォントが美し過ぎる。なんかゴッサムっぽいなと思っていたので調べようと思ったんですね。

で、始めに思い出したのが以前、ワンクリックで使用してるフォントが分かる「WhatFontTool」が便利!という記事を書いたので、これで調べても良かったんですが、前にどっかで『Font Face Ninja』という同じようなChromeエクステンションが紹介されていたのを思い出し、ついでにそっちも試してみようかなって思って使ってみたんですが、思った以上に使い勝手良かったのでここでもご紹介させて頂こうと思います。

Font Face Ninja

使ってみてビックリしましたが、かなり使いやすい!とりあえず当初の目的通り、Twitterで使われているフォントを調べてみようと思うので、その流れにそってご紹介出来ればと思います。

エクステンションはFont Face Ninjaサイトの下の方にChromeとSafariでエクステンションが配布されているので、そこから入手してください。

調べたいサイトを開く

スクリーンショット 2014 08 27 午前1 13 24

エクステンションを起動

スクリーンショット 2014 08 27 午前1 14 18

ページの上部に、Font Face Ninjaのヘッダーが表示されるかと思いますが、この状態で調べたいフォントにカーソルをあわせると…

フォントの種類が表示!

スクリーンショット 2014 08 27 午前1 16 17

やっぱゴッサムだったー!ゴッサーム!ゴッサムフォントの事は、以前僕のブログでも触れたのでそちらをご参照あれ…

特定したフォントを使ってタイポテストも出来る

スクリーンショット 2014 08 27 午前1 19 25

クリックすると、調べたフォントを使って試し打ちも出来てしまう!

マスクボタンを押すと、フォント以外の要素を非表示に!

スクリーンショット 2014-08-27 午前1.35.49

右上の『Mask』ボタンを押すと、画像やアイコン等、フォント要素以外のエレメントを全て非表示にしてくれたりもします。

 

な、なんと調べたフォントによってはダウンロードも出来てしまう!!

スクリーンショット 2014 08 27 午前1 21 32

なんか『Download』ボタンが出てくる時と、出てこない時があるのですが、なんとフォントによってはフォントファイルをダウンロードまで出来てしまう!これは大丈夫なのか…。もちろん、サイトではかなり大きく『あくまでこの機能はフォントの探索と、フォントスキルの向上のために付いている。フォントが好きなのであればフォントは盗むな!買え!』と警告されていますので、このサイトを見ている皆さんはきちんとフォントは購入するようにしましょう…

 

これはしかし、今回のように「ここのサイト何のフォントつかってんだろー」って時にはかなり便利なエクステンションですね!今後色々な場面で役に立ちそうです!

色々な発見もあって楽しいので、是非みなさんもお試しあれ〜!

Pagetop