標準フォントを指定する FONT FAMILY

サイト内のテキスト部分は、フォント(書体)を自由に指定できる訳ではありません。閲覧者のパソコンにインストールされている「標準フォント」を決めうちで指定します。
日本語フォント
CSSにてサイト全体(body)や日本語で書かれた文章には下記のように指定します。
font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
複数のフォントを記述しますが、先頭のフォントが優先されます。
この場合、いずれもゴシック体のフォントで、メイリオ(Meiryo)よりもヒラギノ(Hiragino Sans)が優先される指定になっています。sans-serifは明朝体のようなセリフ体ではないフォント、つまりゴシック体全般を指します。指定したフォントがない環境でも明朝体を避けるため、これを最後に記述します。
明朝体のフォントについては、Windowsの解像度がまだ低いため、見出しなど大きな文字でない限りあまりおすすめできません。ただ上記のように優先順位を決められるため、Macユーザー向けに明朝体や丸ゴシックを表示するなどは可能です。
'Hiragino Mincho ProN'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
'Hiragino Maru Gothic ProN'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
丸ゴシックには太字のウェイトがないため、ブラウザが機械的に膨らませます。ただフォントは本来、文字の太さごとに個別にデザインされるため、フォント作者の意図した文字ではありません。利用箇所は限定した方が良いと思います。
游書体
macOS Sierra (10.12) 以降、游書体は「ダウンロード可能なフォント」となり標準ではインストールされなくなったようです。標準フォントとしては使用しない方がよさそうです。
游書体は当初、MacとWindowsで初めて同じ日本語フォントが使えるということで利用されるようになりました。ヒラギノより柔らく、メイリオよりもしっかりとした印象になります。
現在はWindowsにてメイリオを使用したくない場合の選択肢になると思います。
通常:
'YuGothic', 'Yu Gothic Medium'
太字:
'YuGothic', 'Yu Gothic'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
Macでのフォント名は「YuGothic」、Windowsでは「Yu Gothic」「Yu Gothic Medium」となります。Macが不要な場合は「YuGothic」を外して下さい。
Windowsの「Yu Gothic」はかなり線が細いため、「Yu Gothic Medium」を指定しています。ただそうすると太字が太すぎるため、太字となる要素(h*, strong, b, th, dtなど)だけCSSにて「Yu Gothic」を指定すると適度な太さになります。
英語フォント
英語フォント(欧文フォント)は、WindowsとMacである程度共通のものを利用できます。
- Arial / Arial
- Arial Black / Arial Black
- Comic Sans MS / Comic Sans MS
- Courier / Courier
- Courier New / Courier New
- Georgia / Georgia
- Impact / Impact
- Times New Roman / Times New Roman
- Trebuchet MS / Trebuchet MS
- Verdana / Verdana
Webフォント
標準フォントから話は逸れますが、今はフォントデータそのものをページと一緒にダウンロードして利用できるようになりました。
日本語フォントは文字数が多いため容量が大きくダウンロードに若干時間がかかりますが、英語フォントは軽く利用しやすいと思います。このサイトも「Google Fonts」を利用しています。
日本語のWebフォントについては、「日本語Webフォントの使い方とリスク」という記事も書いていますので参考にしてみてください。