WhatFontの使い方を解説。使用フォントがすぐわかる

この記事のURLとタイトルをコピーする
Chrome拡張機能
WhatFont って、どうやって使うの?
使い方を説明しましょう!気になるサイトのフォントを、調べてみよう。
WhatFont とは?
WhatFont は、WEBサイトで表示されているフォントの詳細情報をみることができる拡張ツールです。
ざっくりレビュー!
デザインがおしゃれなサイトって、フォントまで美しいんですよね。その秘密にせまれるツールなので、ぜひいれておきたい拡張機能です。
この記事でわかること
  • WhatFont とは?
  • WhatFont の使い方について
  • WhatFont の設定について
  • WhatFont 開発サイト

というわけで今回は、WhatFont の使い方を、解説します。

WhatFont の使い方【3ステップ】

Chrome extension howto

WhatFont の使い方を、解説します。

3ステップで、できるだけわかりやすく解説させていただきます。

【ステップ1】WhatFont をダウンロード

Step1 howto

ステップ1は、WhatFont をダウンロードします。
開発サイトでは、Chrome・Safari むけの拡張機能が紹介されています。各配信サイトから、WhatFont をダウンロードしてください。ダウンロードリンクをご用意しました。ご活用ください。
配信サイトからダウンロード

Chrome

Safari

FireFox

開発サイト

【ステップ2】WhatFont アイコンをクリックして調べる

Step2 howto

ステップ2は、WhatFont アイコンをクリックしてフォントを調べます。
操作のポイント

WhatFont icon WhatFont アイコンを、1回だけクリックします。

調べたいフォントの上に、マウスを移動します。

マウスをフォントの上に移動しただけだと、フォント名のみ表示されます。フォントの上で、もう一度クリックすると...

WhatFont1

  • フォントの種類
  • スタイル
  • 太さ
  • 文字の大きさ
  • 行間

といった、フォントの詳細情報をチェックできます。

コメント
かんたんな動作で、フォントの詳細情報をチェックできるのはうれしいですよね。シンプルな見た目が、逆にオシャレなのがステキです。

【ステップ3】WhatFontの動作を終了する

Step3 howto

ステップ3は、WhatFontの動作を終了します。

操作のポイント

WhatFontの動作を終了するには、ブラウザ右上の Exit WhatFontをクリックしてください。

フォントの詳細は、パネル右上の「」をクリックしてください。

コメント

WhatFont の終了の仕方がわからず、画面をクリックしすぎると...

WhatFont2

こんな感じで、ところせましとフォントの詳細パネルが出てしまいますので、注意です。

動作の終了方法がわかっていれば、怖くありませんね!

WhatFont の設定のコツについて

WhatFont の設定のコツについて、解説します。

ツールバーのアイコン設定について

Toolbar Icon

Please choose the one fits your theme
翻訳:あなたのテーマに合わせて、お選びください。

WhatFont の設定についての解説です。といっても、ツールバーのアイコンの色を「白」か「黒」でえらべるのみですので、簡単ですね。

WhatFont を使えないサイト

拡張機能の配信サイトでは、WhatFont が反応しません。

拡張機能をインストールしたのに、どうして使えないの!って戸惑ったわたしのような方は、ご安心ください。

そのほか、使えないサイトなど調べておりますが、いまのところまだ見つけられていません。

WhatFont は、画像には使えないの?

画像のフォントは、認識することができないようです。

今後のアップデートで、どのように対応になるかわかりませんが、期待したいですね!

WhatFont のダウンロード

-拡張機能の配信サイト-

Chrome

Safari

FireFox

まとめ

「WhatFont」について、使い方を解説させていただきました。

気になる WEB サイトのフォントだけじゃないんですよね。サイト初心者のことろは自分のサイトで、フォントがほんとうに切り替わったのか不安だったりしますよね。

そんなときに、WhatFont があなたの手助けになりますよ!

そのほか、便利な Chrome 拡張機能について、こちらの記事をどうぞ↓

【関連】【2020年】Google Chrome 拡張機能まとめ

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ