今見てるサイトのフォントが分かるChromeの拡張機能『WhatFont』


「このサイトのフォントってなんだろ?」って思ったことありますよね?

魅力的なフォントを見た時にぜひ知りたい事だと思います。ソースコードを見れば知ることが出来ますが、実際ちょっとめんどくさいです。

そんな時このChromeの拡張機能『WhatFont』をインストールしていれば、ツールバーのアイコンをクリックするだけでフォントを知ることが出来ます。

Chrome拡張機能『WhatFont』のインストール方法

下のリンクからChromeウェブストアに行き、右上の青いボタン『Chromeに追加』をクリックすればインストール出来ます。こんな感じ。

Chrome拡張機能『WhatFont』の画像

『WhatFont』実際の画像

『WhatFont』実際の使用画面の画像が下の画像です。

Chrome拡張機能『WhatFont』の実際の画像

ツールバーにあるアイコンをクリックした後、気になる所をクリックするだけで使われているフォントが分かります。

こだわっているサイトだと、色々なフォントを使い分けているので、その箇所で使われているフォントを知れます。

フォントサイズや色、行の高さも分かる!

Chrome拡張機能『WhatFont』の実際の画像2

設定されてるフォントが分かるのに加え、フォントサイズと行の高さが分かり、さらにフォントの色も分かります。しかもTwitterでシェアすることも出来るっぽいです。

いっぱいクリックするとめっちゃ出てくる!

ふざけていっぱいクリックするとめっちゃ出てきます。こんな感じ。笑

Chrome拡張機能『WhatFont』の実際の画像3

1個1個消さなくても、ツールバーのアイコンをクリックすればちゃんと全部消えます。

まとめ

僕はこのWhatFontをかなり使ってます。たまたま訪問したサイトのフォントが美しかった時に、「なんていうフォントなんだろう?」と気になることが結構あるからです。

ただ、表示されるフォントはエンドユーザーのPC環境によって変わってきます。すべてのユーザーに同じフォントを表示させたいのなら、フォントファイルをアップロードしてちゃんと設定させなければなりません。

僕は面倒くさくてそこまでやってないので、WindowユーサーにはCentury Gothicで表示されているかと思いますが、Macユーザーにはメイリオかヒラギノで表示されているはずです。

さらに言うと、視読性の面から『ユーザー第一』に考えるのであれば、あまり凝ったフォントは読みずらく、全体的に見ずらくさせてしまいユーザビリティーに欠けます。

僕が大好きなフォント『Century Gothic』も本来であれば使わないほうがいいのかも知れませんが、これだけは僕の身勝手で設定しています。自己満で御免!


IT・WEB
アクセス数: 3970

スポンサーリンク

よかったらシェアして下さい!

関連記事 これも読むんだよ♪

キタ━(゚∀゚)━!YouTubeから『第三者のコンテンツと一致しました。』CONTENT IDというのに引っかかったらしい

キタ━(゚∀゚)━!YouTubeから『第三者のコンテンツと一致しました。』CONTENT IDというのに引っかかったらしい


【カラーサンプル】ホームページの色選択で悩んでる時に役立つサイト8選!

【カラーサンプル】ホームページの色選択で悩んでる時に役立つサイト8選!


【Wi-Fi WALKER】WiMAX2+ HWD15のネット接続スピードを測定検証!

【Wi-Fi WALKER】WiMAX2+ HWD15のネット接続スピードを測定検証!


コメントはお気軽にどうぞ
内容に問題なければ下記の「コメントを送信する」ボタンを押してください。