個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適な機能拡張をご紹介。
サイトのフォントを検証するとき、どんなツールを使っていますか?
デベロッパーツールや解析関連のブックマークレットなどを使っている方も多いと思います。
今回ご紹介する機能拡張は、サイト上に表示されているフォントだけを抽出して、カーソルを合わせるだけで、フォントファミリー名、サイズ、ラインハイト(行送り)を瞬時に解析する便利なツールです。
しかも、気に入ったフォントが無料で利用できるものであれば、そのままダウンロードもできちゃうスグレモノ。
最近の海外のサイトの多くはWEBフォントを多用しています。
このフォントいいな、と思ったたきにはこの機能拡張を活用したいですよね。

WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適な機能拡張「Fontface Ninja」

「Fontface Ninja」は、WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適なChromeとSafari用機能拡張です。
サイト上に表示されているフォントだけを表示し、カーソルを合わせるだけで、フォントファミリー名、サイズ、ラインハイト(行送り)を瞬時に解析してくれる便利なツールです。
試しに他の文章を入力したり、フォントサイズを変更することも可能ですので、事前のフォント検証にも役立ちます。

Fontface Ninjaの使い方

Chromeばかり使っているので、Chromeで使い方を説明します。
Fontface Ninjaに行き、Chromeに機能拡張を追加します。
追加すると、右上にFontface Ninjaのアイコンが表示されるので、フォントを検証したいサイトでそのボタンをクリックします。

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

クリックするとメニューが上からニュルッと表示されます。

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

そのまま調べたいフォント部分にカーソルを合わせれば、フォントの分析結果を表示してくれます。

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

しかし、Fontface Ninjaがすごいのはここから。
フォントがWEBフォントか、画像か、というのは一見してわからない場合があります。
そんなときには、メニューにある「Mask」をクリックしましょう。
すると、以下のように検証可能なフォントだけが表示されるのです!
こりゃ便利!!

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

で、実際にフォント部分をクリックすると、メニュー部分に「Type here…」というのが、表示されます。
この部分をクリックすると、テキストを入力できますので、フォントを利用する前に検証が可能です。

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

右隣にあるスライドバーを動かすとフォントサイズを変更することも可能です。

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

さらに、右隣に表示されている「Download」をクリックすれば、フォントをダウンロードできます。
ね、便利な機能拡張でしょ。

Fontface Ninja

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 7

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

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

要チェク!2015年春の英語/欧文無料フリーフォント60+

かっこ良くて使える!2015年春の英語/欧文無料フリーフォント50+

かっこいい無料の英語/欧文フォントが目白押しの2015年春。 かっこいい上に即現場で使える英語/欧

記事を読む

コミカルでポップ!無料の欧文コミックフリーフォント/英語マンガフリーフォント70

無料の欧文コミックフリーフォント/英語マンガフリーフォント70

無料の欧文コミックフリーフォント/英語マンガフリーフォントを70集めてみました。 フリーフォントで

記事を読む

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

名だたるデザイナーが作成したフリーの英語/欧文フォントが無料!Dribble発の英語/欧文フォント20

名だたるデザイナーが作成したフリーの英語/欧文フォントが無料!Dribble発の英語/欧文フォント20

Dribbbleというサイトをご存知でしょうか。 世界の名だたるデザイナーが作品をアップしているコ

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせで、少ないフォントでも、より美しい日本語デザインを実現できる素晴らし

記事を読む

無料で使える英語/欧文のインライン(二重線)フリーフォント

無料で使える英語/欧文のインライン(二重線)フリーフォント21

無料で使える英語/欧文のインラインフォント=二重線が入ったフリーフォントをご紹介します。 デザイン

記事を読む

無料の四角く角張ったフォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォントをご紹介します。 スクエアフォントは

記事を読む

商用利用可能な無料のWEBフォントアイコンセット「360 Web Font Icons」

個人でも商用でも無料で利用できる360個のフリーアイコンセット「360 Web Font Icons

記事を読む

ビンテージ風デザインに最適なフリーフォント!レトロな無料フォントベスト

ビンテージ風デザインに最適!レトロな無料フリーフォントベスト83

レトロな雰囲気やビンテージ風デザインにぴったり合いそうな、 無料で利用できるレトロ/ビンテージ風の

記事を読む