おすすめのfont-family設定 2020年

cssのfont-familyは、基本的には一般のパソコンやスマートフォンに元々入っているフォントしか指定できません。(正確には、指定自体はできますが、見てくれる方のパソコンで再現できません)
複数のフォントを指定できますが、左から順に調べ、フォントが見てくれる方のパソコンに指定されたフォントがあったら、そのフォントが反映されます。


例)
body{
font-family:フォントA , フォントB , フォントC ,sans-serif;
}

この場合、パソコンは、まずフォントAが入っているかを調べます。
入っていたらbody全体にフォントAが反映されます。
入っていなかったら、フォントBが入っているかを調べます。

以降、フォントCまで入っていなかったら、sans-serifで、
そのパソコンに入っているゴシック体のフォントで表示されます。

という事で、優先順位の高い順に指定する必要があります。
以下、2019年時点で一般的な設定方法です。


こちらは、游ゴシックが優先の指定方法です。
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;

こちらは、Macはヒラギノ系、windowsはメイリオが優先です。
font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;
ひとまず、上記の二種類を好みに合わせて使っていくのが良いかと思います。

なお、明朝系は、以下の様な指定が良さそうです。
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;

慣れてきたら、他のフォントも使ってみましょう。