サイトに使われているフォントを調べる拡張機能『WhatFont』の使い方

フォント 調べるパソコン&スマホ

僕と同じくサイトの運営をされている方なら一度は直面する問題があるかと思います。

それは「サイトに使う文字のフォントって何が適切なの?」ということです。現在使用することの出来るフォントの種類は日本語だけでも一千種類を超えると言われており、どのフォントを使うのが良いのか非常に悩んでしまう所です。

そうした使用するフォントの種類に悩んだ時に使える良い方法が「他のサイトで使われているフォントの種類を確認する」ということでしょう。

自分が「このサイトが使っているフォントは綺麗で見やすいな」と感じた場合、そのフォントを使えば自身のサイトを見た読者の方も同じ気持ちになるでしょう。

そのように「他のサイトのフォントを調べる」という時に重宝する機能が、Googleの提供する拡張機能「WhatFont」です。

このツールがあればどのサイトでも使われているフォントを調べることが出来るので、あなたのサイト作りに大きく貢献してくれることは間違いありません。

WhatFontのインストール方法

WhatFontはGoogle Chromeの拡張機能の1つです。

まずは以下のページに行ってWhatFontをインストールしてみましょう。インストール自体は1分もかかりません。

サイトに使われているフォントを調べる拡張機能「WhatFont」

 

すると以下のような画面が出てくるので、右上の「Chromeに追加」をクリックします。

 

すると画面にポップアップが出てくるので「拡張機能を追加」をクリックします。

 

以下のようなポップアップが出ればインストールは無事成功です。

 

WhatFontを実際に使ってみよう

使い方は非常に簡単で、画面右上に表示されるマークをクリックして、フォントを調べたい文章の上にカーソルを持っていくだけです。

 

使い方の動画です。容量は10MB程度なので通信制限は気にしなくて大丈夫です。

動画が見れない方のために画像でも貼っておきます。

 

① まずは右上のマークをクリックします。

 

② 次にフォントを調べたい文章の元へとカーソルを動かすと使われているフォントの名前が出てきます。

 

③ そこでもう一度クリックをすると詳細な情報が現れます。

 

④ フォントを調べて満足したら、もう一度右上のをクリックすれば終了します。

 

今回僕のサイトでは「Noto Serif JP」というフォントを使用しており、サイズは「16px」だということが分かりますね。

この機能を使えば「気になるあのサイト」のフォントが丸見え(変な意味ではないです)なので、「あのサイトはフォントが綺麗だな……」と思った方は是非使ってみてはいかがでしょうか?

もちろん僕のサイトを参考にしていただけても嬉しいです。

このサイトを見て「フォントがなんかいいな……」と思った方は、是非「Noto Serif JP」を使ってみてください。

 

WhatFontが使えない場合に

上記の手順を試してもWhatFontが使えない場合、以下の順で対処してみましょう。

 

① ページを再読み込みする。

→ この拡張機能はサイトの情報を入手してフォントを表示しているため「インストール後に読み込んだサイト」でしか使えません。一度「ページの再読み込み」をしてあげましょう。体感的にこの問題が一番多いと思います。

② Chromeがシークレットモードになっていないか確認する

→ シークレットモードでも使えますが、初期設定では使えないようにオプションで設定されています。

③ WhatFontを再インストールする

→ インストール過程で何かあったのかも。試しに再インストールしてみましょう。

④ Chromeを再起動する。

→ 僕はWhatFontが原因でChromeを再起動したことはありませんが、拡張機能が使えない時に行う鉄板の対処法です。

⑤ パソコンを再起動する。

→ 最終手段です。ここまで出来なかった人は一縷の望みをかけてパソコンを再起動してみましょう。

 

いかがでしょうか?

大抵の場合はページの再読み込みで解決するとは思います。

恐らく多くの人がどこかのサイトを見た後「このページのフォントを調べたいな……」と思ってWhatFontをインストールするので、サイト自体はインストール前に表示された可能性が高いのです。

他にも大っぴらには言えないことをしていた男性諸君はシークレットモードで引っかかっている可能性があるでしょう(さすがに自分でもそれは無いと思います……)

無事にWhatFontの機能が使えるようになっていれば幸いです。

 

 

コメントを送る

タイトルとURLをコピーしました