font-family　2018　あれこれ悩むより、有名サイトを参照するといい。

フォントファミリー（font-family)の指定については、多くのサイトがそれぞれの工夫を重ね、デザイナーの意見なども含めて記載してある。結局どれが一番いいのか？ということで、毎回サイトを作成するたびに悩んできた。
あれこれと悩むより、有名サイトから拾ってきた方が確実では？？

ということで、今現在は下記の設定にしている。

.font-inherit{
	font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',
		"segoe ui",'游ゴシック  Medium','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

各有名サイトのフォントファミリー（font-family)指定を見てみる。

ＭＳＮニュース

https://www.msn.com/

言わずとしれた、ＭｉｃｒｏＳｏｆｔのニュースページ。
最初にここを参照したのは、フォントの指定方法によっては、ＩＥやエッジというブラウザでの文字が汚くなりがちだったからです。

ここでの設定はこのようになっています。

/*media all*/
body, button, input, select, textarea {
    font-size: 1.4rem;
    line-height: 1.357;
    font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;
}

Segoe（シーゴー、シーゴ）はマイクロソフト社が使用している書体の一つ。officce製品や、Win7などのシステムフォントにも採用されているフォント。そのためTOPに指定されていると思われる。

ｙａｈｏｏニュース

https://news.yahoo.co.jp/

yahooニュースは「遊」系のフォントは使用せずに、IE等では安定のメイリオでスタートしている。
ただし、指定の順番として和文フォント　＞　欧文フォントなので、欧文フォントはほとんど使用されない可能性があります。

/*media all*/
body, input, textarea, select {
    color: #333;
    font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
}

Ａｐｐｌｅ

https://www.apple.com/

では、Ｍａｃ、ｉＰｈｏｎｅ、ｉＰａｄなどの製品を出している、Ａｐｐｌｅはどうなのか？

/*media all*/
:lang(ja).intro {
    font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
}

Google

https://www.google.co.jp/intl/ja/about/

Ｇｏｏｇｌｅのfont-family指定は非常にシンプルです。
下記は会社情報などのページで指定してあったfont-familyです。

body, html {
    color: #757575;
    font-family: Roboto,Arial,Helvetica,sans-serif;
    font-size: 16px;
}

その他参考になるサイト

Font-familyメーカー：標準フォント一覧からサクッと指定

https://saruwakakun.com/font-family

このサイトでのお勧め設定は、下記のようになっていました。

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

font-family 2018 あれこれ悩むより、有名サイトを参照するといい。