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」でフォントを選択し、そのあとでダウンロードアイコンをクリックすればダウンロードが可能なはずである。