個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

カリグラフィーの達人が描くカリグラフィーのロゴがとにかくすげえ

カリグラフィーの達人が描くカリグラフィーのロゴ制作動画がとにかくすげえ

カリグラフィーの達人が描くカリグラフィーのロゴ制作動画(タイムラプス)をご紹介。 カリグラフィーは

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

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

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

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

記事を読む

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

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

記事を読む

ロゴ制作などに役立つ無料の英語フリーグリッドフォント29

グリッドフォントというフォントは日本ではなじみのないフォントですが、海外のフリーフォント公開サイトで

記事を読む

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

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

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

記事を読む

プロが使う欧文/英語の無料フリーフォントが手に入る無料フォント配布サイトBest10

プロが使う欧文/英語の無料フリーフォントが手に入る無料フォント配布サイトをまとめてみした! 無料の

記事を読む

商用利用可!英語フリーフォント171:デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

商用利用可!英語フリーフォント200+デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

英語(欧文)のフリーフォントのなかでも、「これはぜひとももっておきたい」プロフェッショナルなフォント

記事を読む

ロマンチックな英語/欧文の無料フリーフォント19

ロマンチックな英語/欧文の無料フリーフォントをまとめてみました。 年に数回あるロマンチックなイベン

記事を読む

Googleフォントの人気ランキグがすぐわかる!Googleフォントを人気順で探しやすくした「FontCDN」

Googleフォントが見つけやすい!Googleフォントを無限スクロールで探しやすくした「FontCDN」

Googleフォントを無限スクロールで探しやすくした「FontCDN」をご紹介。 Googleフォ

記事を読む