ブラウザの開発者ツールで、サイトやブログのフォントを調べる方法があるのでご紹介します。
先日、ブログの表示フォントをメイリオに変更した時に、他のホームページやブログで使われているフォントをいろいろと調べておりました。
最初はフォントの調べ方がわからなかったのですが、ChromeやFirefoxの開発者ツールを使うと、簡単に使用フォントやサイズなどの詳細を見ることができました。
サイトやブログで使われているフォントを調べるなら、パッと見てわかるChromeやFirefox、Microsoft Edgeなどのモダンブラウザがおすすめです。
このサイトのフォントはカッコいいとか、見やすいのでマネしたいと思ったら、開発者ツールで使用フォントを調べて変更するのも手ですよ。
あと、サイト内のフォントがわかる「WhatFont」というChrome拡張機能も便利です。
ブラウザの開発者ツールでフォントを調べる
Chrome、Firefoxなどのモダンブラウザには、開発者ツール（デベロッパーツール）が用意されていて、サイト制作中のデバッグや不具合の原因を調べるとき使うと便利です。
また、ソースコードだけではわからないHTMLやCSS要素を調べる時にもよく使います。
Microsoft EdgeやFirefox は開発者ツール、Chromeはデベロッパーツールという名称です。MacのSafariも開発メニューを有効にすれば使えるようになります。
どのブラウザでもチェックしたいページを開いて、「F12」を押せば開発者ツールが立ち上がります。フォントを調べるときも、開発者ツールを使えば簡単に使用フォントが確認できます。
では、さっそくフォント調査の方法をChromeとMicrosoft Edge、Firefoxの開発者ツールを使って説明します。
Chromeデベロッパーツールでフォントを調べる
まずは該当のサイトやブログをChromeで開いて、調べたいフォントが使われているテキストを反転させ、そこで右クリックして「要素を検証」を選択します。
Chromeデベロッパーツールが開いて、サイト中のHTMLやCSSの情報が表示されます。
右側のウィンドウで「Computed」を選択して、一番下までスクロールさせると「Rendered Fonts」という項目があり、反転させたテキストで使われているフォントがわかります。
この通り、このブログの使用フォント「メイリオ」が表示されています。
デベロッパーツールを使うと、フォントサイズや上下左右のmarginなど、そのテキストに適応されているCSSスタイルが表示されるので、開発中の修正や確認に便利です。
Microsoft Edge 開発者ツールでフォントを調べる
Microsoft Edgeでフォントを調べる場合は、ページの上で右クリックして「開発者ツールで調査する」を選択します。
開発者ツールは、ファンクションキーの「F12」か、ショートカット「ctrl」+「shift」+「i」でも開きます。
続いて「ページ上の検査対象となる要素の選択」をクリックします。ショートカットは「ctrl」+「shift」+「c」です。
フォントを調べたいテキストにカーソルを当てると、その要素の情報を表示してくれます。さらにクリックすると、色が付いた部分の要素を取得します。
開発者ツールのペインから「計算済み」を選択して、下までスクロールすると「表示されるフォント」の「Familiy name」にフォント名が表示されます。
Firefox開発者ツールでフォントを調べる
Firefoxの場合は開発者ツールに「フォント」という項目があるので、もっとわかりやすいです。
手順もChromeと同様です。まずは該当のサイトをブラウザで開いて、調べたいフォントが使われているテキストを反転させます。右クリックで「要素を調査」を選択すると、開発者ツールの右側に「フォント」という項目が表示されます。
ここに使用中のフォントや、サイズ、行の高さ、文字間隔、太さ、斜体の情報が表示されています。フォントの設定をいろいろ変更して、プレビュー表示で確認できる機能もあります。
さらに、右下にある「このページのすべてのフォントを表示」をクリックすると、そのサイト全体で使われている全てのフォントがわかります。
サイト全体のフォント一覧なので、該当のページだけでなく、管理画面で利用されているフォントや、その場所のURLもすべて表示されます。
フォントを調べるときは、Chromeデベロッパーツールよりも、フォント設定の機能も充実しているFirefoxの開発者ツールの方が便利ですね。
Safariデベロッパーツールでフォントを調べる
MacのSafariでフォントを調べるには、まずSafariの環境設定から開発者ツール（デベロッパーツール）を表示させる設定が必要になります。
Safariの上メニュー「Safari」→「環境設定」を開き、「詳細」タブから「メニューバーに”開発”メニューを表示」にチェックを入れます。
これでSafariの開発者ツール（デベロッパーツール）が有効になりました。
あとは「開発」メニューから「Webインスペクタを表示」、もしくはショートカットキー「Option + Command + I」で表示させると、使用フォントを調べることができます。
右クリックを設定済みであれば、右クリックメニューから「要素の詳細を表示」に進むと、Webインスペクタが開いてサイト内のHTMLやCSSの情報が表示されます。
他にも、iPhoneのSafariで「詳細」→「Webインスペクタ」をオンにしてMacに接続すると、MacのSafariでWebインスペクタを開くことができます。
Chrome拡張機能 WhatFont
ウェブサイトやブログに使われているフォント名などの情報を、ワンクリックで取得できるChrome拡張機能「WhatFont」も便利です。
WhatFontを有効化して調べたい文字をクリックすると、フォント名やFont-Family、フォントのサイズ、太さ、行間、CSS属性や属性値を詳しく表示してくれます。
ブラウザの開発者ツール（デベロッパーツール）を立ち上げる必要がないので、手軽にサイト内のフォントを調べることができます。
Chrome拡張機能「WhatFont」の使い方は、以下の記事を参照してください。
参照サイト WhatFontの使い方 フォントを調べるChrome拡張機能
WhatTheFontで画像内のフォントを調べる
ブラウザの開発者ツールでは調べることができない画像内のフォントは、「WhatTheFont」を使うとある程度までわかります。
英語のウェブサービスですが、使い方はとても簡単です。
調べたい画像をWhatTheFontにアップロードして「Continue」をクリックするだけで、画像内のフォント候補がいくつか表示されますよ。
ただし、調査対象のフォントは英文フォント限定で、日本語のフォントは使えませんでした。英語のロゴなんかを調べるときに使うといいかもしれません。
CSSでホームページやブログのフォントを変更するときは、サイト全体で適切なfont-familyを構成する必要があります。ご参考まで・・・
PCにインストールされたフォントを一覧表示できる「wordmark.it」も便利です。
