font-familyの指定に迷ったら、有名サイトを参考にしてみよう。

サイトデザインの雰囲気や、コンテンツのテーマなどによって、悩み悩んでしまう「font-family」。

自分なりのテンプレを用意している人もいるかもしれません。

私の場合は、都度、サイトのイメージに合うものをという感じで考えているのですが、結局のところ、何が良いのかわからんです。

そんなときは、有名サイトをチェックして、自分のイメージに近いものを参考にすることをお勧めします。
ということで、ここでもいくつかピックアップしてみます。bodyタグにしているスタイルを見てます。

Google

font-family: arial, sans-serif;

Yahoo！ Japan

font-family: MS PGothic,Arial,Hiragino Kaku Gothic ProN,Osaka,sans-serif;

Facebook

font-family: San Francisco, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;

Twitter

font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

Instagram

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

Amazon

font-family: 'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;

メルカリ

font-family: "Source Sans Pro", Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;

Uber

font-family: ff-clan-web-pro,"Helvetica Neue",Helvetica,sans-serif;

Airbnb

font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic","ＭＳ ゴシック","Helvetica Neue",Helvetica,Arial,sans-serif ;

YouTube

font-family: "YouTube Noto",Roboto,arial,sans-serif;

色々自分のサイトにはめて見て、イメージに合うフォントを探してみると良いですね！