このフォント何? ウェブサイトやブログのフォントを調べる方法

スポンサーリンク

chromeデベロッパーツール 使用フォント表示

先日、いわしブログの表示フォントをメイリオに変更した時に、他のウェブサイトやブログで使われているフォントをいろいろと調べておりました。

最初はどうやったらいいのかわからなかったのですが、ChromeやFirefoxの開発者ツールを使うと、簡単にフォントを調べることができました。

IEでも可能ですが、それなりの知識が必要なのでフォント調査には不向きです。フォントを調べるなら、パッと見てわかるChromeやFirefoxがおすすめです。

このブログのフォントは見やすいとか、カッコいいなと思った時は、開発者ツールでフォントを調べてマネするのも手ですよ。

開発者ツールでフォントを調べる

Chromeデベロッパーツール

IEやChromeのような主要ブラウザには開発者ツールというものが用意されていて、デバッグや不具合の原因を調べるときに便利です。また、ソースを見ただけではわからないCSS要素を調べる時にも使います。

IEは開発者ツール、Chromeはデベロッパーツール、Firefoxなら開発者ツールという名称ですね。MacのSafariも開発メニューを有効にすれば使えるようになります。

どのブラウザでもチェックしたいページを開いて、「F12」を押せば開発者ツールが立ち上がります。フォントを調べるときも、開発者ツールを使えば簡単にフォント調査ができます。

では、さっそくフォント調査の方法を解説しましょう。いわしはChromeを使っているので、Chromeを例にあげて説明します。

Chromeデベロッパーツールでフォントを調べる

まずは該当ページをChromeで開いて、調べたいフォントが使われているテキストを反転させます。

ウェブサイト フォント調査 テキスト反転

そこで右クリックして、「要素を検証」を選択すると・・・

chrome 右クリック 要素を検証

このようにデベロッパーツールが開きます。

chrome デベロッパーツール

デベロッパーツール右側のウィンドウで「Computed」を選択して、一番下までスクロールさせると「Rendered Fonts」という項目があり、反転させたテキストで使われているフォントがわかります。

この通り、いわしブログのフォント「メイリオ」が表示されました。

chromeデベロッパーツール computed

Firefox開発者ツールでフォントを調べる

Firefoxの場合は開発者ツールに「フォント」という項目があるので、もっとわかりやすいです。

手順も同様です。まずは該当ページをブラウザで開いて、調べたいフォントが使われているテキストを反転させます。右クリックで「要素を調査」を選択すると、開発者ツールの右側に「フォント」という項目が表示されます。

Firefox開発者ツール フォント

さらに、右下にある「このページのすべてのフォントを表示」をクリックすると、ページ全体で使われている全てのフォントがわかります。

フォントを調べるときは、ChromeのデベロッパーツールよりFirefoxの開発者ツールの方がわかりやすくて便利ですね。

WhatTheFontで画像のフォントを調べる

ブラウザの開発者ツールでは調べることができない画像内のフォントも、「WhatTheFont」を使えばある程度までわかります。

http://www.myfonts.com/WhatTheFont/

WhatTheFont! « MyFonts

英語のウェブサービスですが、使い方はとても簡単です。

調べたい画像をWhatTheFontにアップロードして「Continue」をクリックするだけで、画像内のフォント候補がいくつか表示されますよ。

ただ、対象フォントは英文フォント限定で、日本語のフォントは使えませんでした。英語のロゴなんかを調べるときに使うといいかもしれません。

いわしブログのフォントを変更した際に書いた記事です。ご参考まで・・・

スポンサーリンク
PC用
PC用

フォローする