気になるブログやサイトの文字フォント種類・サイズを簡単に調べる方法

2019年11月2日 2020年12月28日 5分5秒

楽天ルーム

楽天で購入し、使って良かったものや欲しいと思ったものを紹介しています。
ぜひ、覗いて頂ければ幸いです。

こんにちは。双子持ちサラリーマンです。

ブログやサイトなどを見ていると「このフォント見やすい、何ていうフォントか知りたい」と思うことはないでしょうか？

ゆずる先生

そこで、今回は気になるブログやサイトの使用フォントを簡単に調べる方法を紹介します。

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。

この記事の目次

「WhatFont」とは

「WhatFont」とは、Chromeの拡張機能の1つで、ブログやサイトで使用している文字フォントなどのフォント情報を簡単に調べることができる機能です。

双子

この機能を使用すると、どんなことができるようになるんですか？

ゆずる先生

自分が気になったブログやサイトのフォント情報を知ることができるため、その情報をCSSに反映することにより、簡単に再現することができます。

双子

それは便利ですね。早く使ってみたいです☺

Chromeへの「WhatFont」のインストール方法を紹介します。

STEP1

Chrome ウェブストアにアクセス

Chrome ウェブストアの拡張機能「WhatFont」にアクセス
STEP2

Chromeに追加

アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。
STEP3

拡張機能を追加

ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。
STEP4

追加完了

拡張機能が追加されると、URL入力の右横にWhatFontアイコン（赤枠）が追加される。その際、ポップアップ画面（下記画面参照）が表示されます。

「WhatFont」の使用方法を紹介します。

STEP1

「WhatFont」アイコンをクリック

「WhatFont」アイコンをクリックし、【Exit WhatFont】ボタンが表示されることを確認する。
STEP2

フォントが気になる文字の上にマウスを移動

「事前に探した文字フォントが気になるサイト」の気になる文字の上にマウスをもっていくと、その文字フォントが表示される。
※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、【MS PGothic】が表示されています。
STEP3

表示された文字フォントをクリック

さらに、【MS PGothic】の部分をクリックすると、詳細な情報が表示されます。

具体的には以下のような情報を取得できます。

フォントの種類：Family
フォントのスタイル：Style
フォントの太さ：Weight
フォントのサイズ：Size
行間：Line Height
フォントのカラーコード：Color