「あのサイトのフォントの名前は?」ってなった時にフォント名を検索する方法

Sponsored Link

イケてるサイトで使われているフォント名を知りたい!

どうも、Linです。浮遊、してみたいですね。

 

ごくたまに、ウェブサイトをチラチラみていると、

「このウェブサイトのフォントかっこいいな!」

と嫉妬するときありませんか??

そんなとき、ブログなどのサイトを運営されている方だったら、

「俺もこのフォント使いたいから、フォント名を知りたい!」

と思いますよね。

 

ところが、フォントの感じを検索するのはすごく難しい。

「えっと、この文字の曲がり具合がこれこれコウコウデ・・・」

とGoogle検索しても、一体何のフォントだかさっぱりです。

 

そこで今日は、

あるウェブサイトのフォントの名前が何なのか?

を調べる方法を今日は見出したので、メモ代わりに書き留めておこうと思います。

 

 

ウェブサイトで使われているフォント名を知る方法

「あのフォントいいな!俺も使いてえ」

となった時には次の方法を試してみてください。

 

Step1. FireFoxのプラグイン「Firebugs」をダウンロード

まずは、ウェブブラウザはプラグインの都合上「FireFox」を使っていきますよ。

まずはプラグインの一つである、

Firebug

というものをインストールしてみます。

 

フォント 名前 検索

 

このプラグインは虫のアイコンをしていますが、全く怪しいものなんかではなく、簡単に言ってしまうと、

表示しているサイトのHTML・CSSファイルを知れちゃうツール

なのです。

これは便利da!

 

Step2. いけてるWebページに行く

プラグインのダウンロードが完了したら、いけてるフォントのウェブサイトにひとっ飛び。

ぼくは個人的に、DTMツールのStudio Oneのページで使われているフォントの名前が知りたかったので、このページをFirefoxで表示してみます。

 

 

 

Step3. Firebugを起動

次は、Firefox右上に表示されているFirebugのアイコンをクリック。

 

 

すると、次のようにウィンドウがポップアップしてくることでしょう。

 

 

 

Step4. CSSのタブをクリック

続いて、フォントの名前が記載されているであろうCSSファイルを閲覧していきます。

Firebugのタブの中の1つの「CSS」を選択してみてください。

 

 

すると、いけてるウェブサイトのCSSファイルが覗き見できちゃうのです。

 

Step5. font-familyを探す

最後に、そのCSSファイルから「font-family」という記述を探します。

CSSではフォントの種類を指定するときは、

 

 

と記述するんでしたよね??

よって、先ほどFirebugから読み取ったファイルの中からCSSに注目。

CSSの中からfont-familyを探せばいいのですね。

 

ちなみに先ほどのSudio Oneのいけてるページは、

  • Lato
  • Open Sans

の2種類のフォントを使っていることがわかりましたね。

どうやら調べてみると、Google Fontを使えば使用できるようなので、次回はGoogle fontの使い方を勉強しつつ、いけてるフォントを使ってみたいと思います。

 

それでは!

Lin


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる