参考サイトでどんなフォントを使っているか調べる方法

参考サイトでどんなフォントを使っているか調べる方法

LPを製作する際に、どんなフォントを利用するか?非常に神経を使うところだろう。参考サイトを決定したが、そのサイトでどんなフォントを使っているのか?どうやって調べたら良いのか?考えたことはないだろうか? 結論から言うと、フォントを調べる方法はそこまで難しくない。方法は二つだ。

Yahoo知恵袋などで専門家に聞く

なんとも拍子抜けすする回答かもしれないが、方法1は「Yahoo知恵袋で聞く」だ。Yahoo知恵袋を侮ってはいけない。ここには本当に専門的な人がわんさかいる。 フォントはテキストで表示されている場合と、画像で表示されている場合の2種類に分かれる。画像で表示されている場合、これは機械的に探す方法が今の所ないため(そう言う判別ソフトはあるにはある)そのフォントを知っている人に聞く。というのが最も早い。 こんな本も販売されているくらいで、フォントに詳しい人は鬼の様に詳しい。知っている人に聞くのが早い。さらに言えば知恵袋は無料だ。

CSSを調べる

例えばこのサイトの一番下の価格表記部分のフォントを知りたかった場合。 https://www.deportareclub.com/detox_suit/ テキストで表示されている部分は選択が可能だ。 次に、HTMLを表示させてみよう。Chromeなら右クリックで表示させることができる。

fontかCSSで文字列検索をする




このサイトの場合、fontで検索しても0件ヒットになる。そう言う場合はcssで検索しよう。そうすると大抵の場合CSSの外部リンクが見つかる。このどちらかにフォントが記述されているはずだ。

font-familyで検索する

body {
	-webkit-font-smoothing: antialiased;
	font-family: 'Roboto', sans-serif;
}
font のみで検索しても良いが、正確にはfont-familyd で指定されている。このサイトではよく見るフォント以外に、あまり見かけないフォントが指定されていた。WEBフォントだ。

フォント名でググる

Roboto - Google Fonts あとはフォント名でググるだけで大抵のフォントは検索可能だ。今回のフォントはどうやらこの「Robot」でビンゴだった様だ。Googleフォントに限らないが、表示させたい文字を打ち込むとそれを該当のフォントで表示してくれる。判別が容易になる。

Google Fontをダウンロードする

Google Fontだが、これはダウンロードしてIllustratorなどでデザインすることも可能だ。左上の「DESELECT THIS FONT」でフォントを選択し、そのあとでダウンロードアイコンをクリックすればダウンロードが可能なはずである。