Webサイトで使われているフォントを調べるGoogle Chrome拡張機能”WhatFont”

シェアする

  • このエントリーをはてなブックマークに追加
  • 12

昨年webデザインの勉強をきちんとしようと思いながら、なかなかできないでいた@a_kikaです。

Adobe CS6をアカデミックで購入し、勉強し始めたところへ肩関節骨折。
そして動くようになったところで仕事が忙しくなり、なんだかやっているんだか、やっていないんだか、な状態でしたが、
仕事が一段落したのと、気持ちをオンから切り替えるためにマイペースで少しずつやっています。
と言っても、色々なサイトを見て、いいと思ったサイトはEmberでストックし、「なぜこのサイトがいいと思うのか?」等考えたり、
バナーを作る時は黄金比を念頭に作ってみたり、色選びはカラーツールで意識的にやる、illustratorでペジェの練習をするとか
そんなことだけですが。

そこで気になるのがフォント。
ネットをしていて、「このフォントなんだろう?」と思う時があります。
そんなときに簡単にフォントを調べられるGoogle Chrome拡張機能があったのでご紹介します。フォントひとつでイメージって全然変わりますよね。
例えば、日本語ではゴシック体と明朝体が使われることが多いですが、この2つではイメージが全然違う。
私は仕事柄、女性らしさを出したいので、基本的に明朝体を使用しています。
でも、アルファベットを使用することも多いのですが、このアルファベットだとフォントの種類がめちゃくちゃ多いので、
「あのサイトで使われているフォントなんだろう」と思った時にページソースを覗いたりしていたのですが、
これも結構面倒くさい。
もっと、サクっと調べられないかな?と思ったら見つけたのが、Google Chromeの”WhatFont”という、
そのものズバリなネーミングの拡張機能です。

WhatFont

ちなみに、Google Chromeの拡張機能ですが、私はSRware Ironを使用しましたが大丈夫でした。
なので、その他Chrome派生ブラウザでもいけるのではないかと(保証はありません)

まず、Chromeウェブストアから、”WhatFont”をダウンロードし有効にします。
これが”WhatFont”のアイコンです↓↓

アイコン

ちょっと右側が切れてしまって見にくくてごめんなさい(/_;)
一応白丸でかこんだのですが、右側の”f?”となっているのが”WhatFont”です。
これで準備はOK!
後は調べたいサイトの、調べたい文字上でクリックしてみましょう。
下記が、このブログで調べたものです。
ちょうど、昨日の記事ですね。

   Whatfont

文字上でクリックすると、黒いポップアップが現れます。
上記だと、一番上にArial-regularとありますね。
“Adobe Brackets”の文字がArial-regularである、ということです。

「あのサイト、なんのフォント使っているんだろう?」そんなときに簡単に調べられる
Google Chrome拡張機能のご紹介でした。

WhatFont

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする