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

スポンサーリンク
スポンサーリンク

フォントを調べる

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

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

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

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

スポンサーリンク

ブラウザの開発者ツールでフォントを調べる

Chromeデベロッパーツール

Chrome、Firefoxなどのモダンブラウザには、開発者ツール(デベロッパーツール)が用意されていて、サイト制作中のデバッグや不具合の原因を調べるとき使うと便利です。

また、ソースコードだけではわからないHTMLやCSS要素を調べる時にもよく使います。

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

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

では、さっそくフォント調査の方法をChromeとFirefoxの開発者ツールを使って説明します。

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

まずは該当のサイトやブログをChromeで開いて、調べたいフォントが使われているテキストを反転させ、そこで右クリックして「要素を検証」を選択します。

chrome 要素を検証

Chromeデベロッパーツールが開いて、サイト中のHTMLやCSSの情報が表示されます。

Chromeデベロッパーツール

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

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

Chromeデベロッパーツールのフォント情報

デベロッパーツールを使うと、フォントサイズや上下左右のmarginなど、そのテキストに適応されているCSSスタイルが表示されるので、開発中の修正や確認に便利です。

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

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

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

Firefox開発者ツール フォント

ここに使用中のフォントや、サイズ、行の高さ、文字間隔、太さ、斜体の情報が表示されています。フォントの設定をいろいろ変更して、プレビュー表示で確認できる機能もあります。

フォント設定変更のプレビュー

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

サイト全体のフォント一覧なので、該当のページだけでなく、管理画面で利用されているフォントや、その場所のURLもすべて表示されます。

開発者ツール すべてのフォントを表示

フォントを調べるときは、Chromeデベロッパーツールよりも、フォント設定の機能も充実しているFirefoxの開発者ツールの方が便利ですね。

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

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

WhatTheFont! « MyFonts
Seen a font in use and want to know what it is? Upload an image to WhatTheFont to find the closest matches in our database.

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

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

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

CSSでホームページやブログのフォントを変更するときは、サイト全体で適切なfont-familyを構成する必要があります。ご参考まで・・・

ブログのフォントをCSSで変更する
ブログテーマ内のCSSにあるfont-familyを修正して、ブログのフォントを変更してみました。ブログのフォント変更は簡単にできるので、ぜひ試してみてください。フォントの種類はいろいろありますが、メイリオは読みやすいのでオススメです。

PCにインストールされたフォントを一覧表示できる「wordmark.it」も便利です。

インストール済みフォントを一覧表示 wordmark.itの使い方
PCにインストールされているフォントをブラウザに一覧表示できるウェブサービス「wordmark.it」をご紹介します。wordmark.itはシンプルで見やすく、大量のフォント比較や選択したフォントだけの表示、Googleフォントも一覧表示できます。
タイトルとURLをコピーしました