Webサイトで表示するフォントは閲覧するユーザーの環境に依存しています。
グラフィックデザインメインの方でWebサイトのデザインを行う場合などの
Webサイト制作をしたことのない人だと知らない方が多いので前置き書いてます。
例えば、『ヒラギノ』を指定していても、ユーザーの環境になければ別のフォントが表示されてしまいます。
同じく、明朝体はもっと悲惨でWindowsではキレイに表示できるのがわりと最近です。
（なので基本的に日本語のWebサイトってゴシック体が多いですよね。MS明朝は超汚いので過去に全てのテキストを明朝体でデザインされた時には投げたくなりました。）
ゴシック体の指定はこれ！
body {
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}
-apple-systemとBlinkMacSystemFont
Appleの最新システムフォント「san francisco」を指定したいので記載。
macでChromeを使う場合を想定してBlinkMacSystemFontも入れてます。
英数フォントの指定
フォントweightが揃っているものを指定しています。
理由はboldなどを指定した時の綺麗さを考えるとWindowsのArialなどは適さないので、Segoe UIを指定しています。
Webフォントの指定
Webフォントの日本語は有料サービスなどが多いですが、『Noto Sans Japanese』はAdobeとGoogleが共同開発したフォントで無料で使用できますし、私は『源ノ角ゴシック』というフォントでインストールして使用しています。
(見やすくてweightも多く便利！)
このフォントを指定する場合は別途HTMLに以下を記載した上で指定してくださいね。
Google Fonts + 日本語早期アクセスで他にも日本語フォントがあります。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
macのデフォルトフォント→Windowsのデフォルトフォントの順で
macではデフォルトでヒラギノが使用できますよね！
元々キレイなフォントなので指定。
Windowsはメイリオを指定。
mac、Windows共に利用できる游ゴシックは今回やめました。
個人的に細すぎてメイリオよりキレイに見えなかったのです。
最後にサンセリフ体の指定を忘れずに
複数指定していてもどれにも当てはまらない環境があるかもしれないのでサンセリフ体（ゴシック体）の指定をしておきます。
font-familyにこれだけ指定していると環境でデフォルトに設定されているフォントが適応されます。
macならヒラギノやOsaka、Windowsならメイリオや游ゴシック、古いパソコンだとMSゴシックとかですね。
まとめ
Webサイトに関わらず、印刷物でもフォントはアウトライン化しておくのが鉄則だったりしますよね。
理由は入稿するとき、印刷所の方でデータ内で使用しているフォントが無いとフォントが置き換わってしまい、違うデザインになってしまうから。
Webサイトではフォントをアウトライン化みたいな事をすると全部画像でいいんじゃないかとなってしまうので、このように複数のフォントを指定します。
どれかがヒットするはずですし。
できるだけキレイなフォントでWebサイトを見て欲しいので単に『sans-serif』だけを指定するのは止めましょう。