こんにちは、鴨田(@kamologsuper)です。
今までなんとなく記事を書いてきましたが、今日からは名前を名乗って、自分が感じたことや思ったこと、考えたこと、気になること、勉強になったことなど書いていければと思います。
さて、今回はサイトの印象をバシッと決めてしまう『フォント』についてでございます。
このブログを開設してからというもの、なかなかフォントが決まらず何回も変えてきましたが、今日だらだらとネットサーフィンをしている最中に「これだ!」というフォントにやっと出会いました。
が、しかし。
パッっとみで種類がわかるほど私はフォントに詳しくないため、とりあえずフォントを調べる方法を探すことにしました。
そして、フォントを簡単に調べる方法を見つけたのでメモとして残しておこうと思います。
目次
Google Chromeの拡張機能「WhatFont」
分からないフォント名を調べる方法には、該当のフォント画像をアップロードして調べる方法や、FireFoxの開発者ツールで調べる方法など色々あるようですが、今回は天下のGoogle様が提供しているブラウザ、『Google Chrome』の拡張機能である『WhatFont』を使用した方法を紹介します。
Google Chromeをインストール
まず、Google Chromeをインストールしていない方はインストールから始めましょう。
Chromeのインストールはこちらから。
https://www.google.co.jp/chrome/browser/desktop/index.html
WhatFontを追加
インストールができたらChromeを開き、WhatFont – Chrome ウェブストアへ移動しましょう。
※シークレットウインドウでは追加できなかったので、通常のウインドウで開きましょう。
「CHROMEに追加」をクリック
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/8a2f8c37878aeba9b30ee9417e6ce89d.png?resize=728%2C75&ssl=1)
「拡張機能を追加」をクリック
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/e2d80d39fcb1b33de80999921360b3f1.png?resize=502%2C169&ssl=1)
以下の画像が出れば完了です。
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/3888d8cd305dcfe4a250a400248449eb.png?resize=503%2C225&ssl=1)
WhatFontの使い方
WhatFontが追加されるとブラウザの右上に”f?”マークが追加されています。
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/b3598bd0b9f259984f5517d1f5f567f8.png?resize=728%2C349&ssl=1)
“f?”マークをクリックした後に、文字の上にカーソルを合わせるとフォント名が出てきます。
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/7799dcf02dae419ff0f298ef06c9622a.png?resize=728%2C197&ssl=1)
画面右上の”Exist WhatFont“を押すことで終了します。
拡張機能の確認
ついでに、Chromeの拡張機能がどこで管理されているか確認してみます。
ブラウザの右上にある”・・・”→”その他の設定”→”拡張機能”の順番でクリック。
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/169e7fdb5c98ecb9b464de974c17227d.png?resize=501%2C374&ssl=1)
このページで、Chromeに入っている拡張機能の確認、有効のオン/オフ、削除をすることができます。
もし、WhatFontが必要なくなったら、ゴミ箱ボタンを押して削除しましょう。
![](https://i0.wp.com/kamologsuper.com/wp-content/uploads/2017/09/ecf820a9a01c802ef94ad9be30d45821.png?resize=681%2C352&ssl=1)
最後に
今回は、簡単にフォント名を調べる方法について紹介しました。
拡張機能を入れるまで少しだけ時間がかかりますが、一度追加すれば今後は一瞬でフォント名を調べることができるので結構いい機能だと思います。
皆様も是非「Whatfont」を追加してみてはいかがでしょうか。