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