windowsもmacも古いマシンもフォローしないといけないfont-familyの指定って悩みますよね。
私が現場で実際に使っている指定方法使っているフォントの解説も含めてを紹介したいと思います！
ゴシック体
ゴシック体のフォント指定方法です。
ゴシック体とは文字の装飾、かざりが無い太さが均一に表現された文字のことです。
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
上のfont-familyで指定しているフォントの種類について説明しますね！
ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic Proはmac用の日本語表示用フォント指定です。メイリオ,MeiryoはWindowsにもともと入っているフォントでWindows用の日本語表示用フォント指定です。游ゴシック,Yu Gothicは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。ＭＳ Ｐゴシック,MS PGothicは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。sans-serifは欧文（アルファベット）の書体でハネ(セリフ)無しの読みやすい指定です。レンダリングの基本として指定している先頭からトライ＆エラーを試していきます。
先に日本語フォントを指定していると半角英数字で書かれたアルファベッドもすべて全角に変換されてしまう為、
英数字フォント→日本語フォントと指定してあげると良いです。
半角英数を半角できれいに表示したい場合はこちらをオススメします。
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
上のfont-familyで指定しているフォントの種類について説明しますね！
AvenirはiPhone用のアルファベッド半角英数字表示用フォント指定です。Helvetica Neueはmac用のアルファベッド半角英数字表示用フォント指定です。Helveticaはmac用のアルファベッド半角英数字表示用フォント指定です。ArialはマイクロソフトのWindowsやアップルのmacOSなどに同梱されるアルファベッド半角英数字表示用フォント指定です。メイリオ,MeiryoはWindowsにもともと入っているフォントでWindows用の日本語表示用フォント指定です。游ゴシック,Yu Gothicは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。ＭＳ Ｐゴシック,MS PGothicは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。sans-serifは欧文（アルファベット）の書体でハネ(セリフ)無しの読みやすい指定です。sans-serifってなんぞ？
欧文（アルファベット）の書体も、和文が明朝体とゴシック体に分かれるのと同じように「セリフ(serif)」「サンセリフ(sans-serif)」に分類されます。
セリフは、字体の曲がり角にあるハネ（うろこ）を示す言葉で、セリフのある書体がセリフ体となります。サンセリフは「セリフ」がない書体です。「sans-（サン）」とはフランス語で「無い」という意味となり「セリフが無い」の直訳になります。
Webページでは可読性を上げるためにハネのない標準フォントとして「sans-serif」がよく使われます。
明朝体
明朝体のフォント指定方法です。
明朝体とは横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山（ウロコ）がある書体です。
英文だとセリフというハネ的なものがウロコ代わりになります。
font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
ヒラギノ明朝 Pro W3,Hiragino Mincho ProはMac OS Xに標準搭載されているフォントです。游明朝,Yu Minchoは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。游明朝体,YuMinchoは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。ＭＳ Ｐ明朝,MS PMinchoは古くからマイクロソフト社の製品で使用されており、Windows用の文字指定になります。serifは欧文（アルファベット）の書体でハネ(セリフ)有りの読みやすい指定です。serifってなんぞ？
欧文（アルファベット）の書体も、和文が明朝体とゴシック体に分かれるのと同じように「セリフ(serif)」「サンセリフ(sans-serif)」に分類されます。
セリフは、字体の曲がり角にあるハネ（うろこ）を示す言葉で、セリフのある書体がセリフ体となります。サンセリフは「セリフ」がない書体です。「sans-（サン）」とはフランス語で「無い」という意味となり「セリフが無い」の直訳になります。
明朝体の英数字表現としてこのハネを生かした「serif」がよく使われます。
WEBフォント
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
まず@importでGoogleFontからNoto Sansを読み込み、Noto Sans JPを先頭に持ってきてWEBフォントを優先的に読ませる方法です。
GoogleFontの使い方についてはこのページで詳しく説明しています。
簡単コピペで実装できるよう書いています！
コピペその先へ…
SCSSを使っているならばゴシック・明朝・WEBフォントと使い分けができるようにmixinに入れておくと楽ちんですよ！
@mixin fontFamilySerif() {
font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
@mixin fontFamilySansSerif() {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
}
@mixin fontfamily-Noto() {
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
他にも良い指定方法があるよーというタレコミいつでもお待ちしております！