CSSのfont-familyは、メイリオや游ゴシック体など、ウェブページで表示するフォント（書体）を指定できるプロパティ。 もし何も指定しない場合は、OSやブラウザの既定フォントで表示される。
font-familyの後に続けてフォント名を記述する。
body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
主な仕様は以下のとおり。
また、特定の要素に別途フォントを指定する場合、最後に sans-serif または serif などを書いておいた方が良い。
以下のように書いて「MS PGothic」がない場合、body要素のfont-familyは適用されず、ブラウザの既定フォントが適用される場合がある。 要するに親要素のフォントが継承されない。
body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.example {font-family:"MS PGothic";}
MacやiOSのSafariは既定が明朝体（serif）なので sans-serif で表示されない。
以下のように書く。
body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.example {font-family:"MS PGothic", sans-serif;}
ウェブサイトで使われている代表的なフォントには以下のようなものがある。
游ゴシック体または游明朝体を指定する場合、WindowsとMacで名称が異なる点に注意する。 具体的には文字列におけるスペース（空白）の有無、末尾の「体」の有無が異なる。 WindowsとMacで一見統一感がないように思うが、名称が被らないので区別して記述できるという利点がある。
游ゴシック体は新しく、見た目は綺麗だが、Windowsではフォントの線が細く、やや見にくい。 見慣れていて、線も太めのメイリオを使用するのが無難かもしれない。 ただし、以下のように記述すると線を太くすることもできる。
font-family:'Yu Gothic Medium', sans-serif;
Mediumは標準より太く、Boldより細い。
逆に細くしたい場合は以下のように書く。
font-family:'Yu Gothic Light', sans-serif;
また、font-weightプロパティで太さを指定しても良い。
font-family:'Yu Gothic', sans-serif; font-weight:500;
数値は400が標準。
サイトのアクセントとして明朝体を使用したい場合もある。 昔はAndroidに明朝体がインストールされていなかったが、バージョン10あたりから明朝体に対応している。 よって、画像やウェブフォントを使用しなくても、どの環境でも明朝体が表示できる。
font-family:'YuMincho', 'Yu Mincho', serif;
ウェブフォントは、Googleフォントを使うのが楽。 Google Fonts にアクセスし、適当な明朝体を探す。
必要なHTMLとCSSのコードが表示されるので、それをウェブサイトに使用する。
<html> を <html lang="ja"> と書くと、環境によってはバックスラッシュが円マーク（¥）として表示されることがある。 環境というのは、OSやブラウザの種類のほか、サイトで指定したフォントの種類や文字コードなど。 これ以外にも表示に影響が出る文字がある可能性もある。
OSやブラウザがアップデートされた際、既定のフォントが変更されることがある。
特定のフォントを指定しなくても、sans-serif または serif を指定しておけば何かしら最適なフォントが表示されるだろうと今まで考えていた。 ただ、最近はその考えが少し変わった。 字形や太さが変わると結構印象が変わる。
自サイトのフォントを決める際は、大手のサイトなどで使用されているフォントを参考にすると良いかもしれない。
現時点では、私のサイトの基本のフォントは以下のとおり。
font-family:"Hiragino Kaku Gothic ProN", YuGothic, Meiryo, sans-serif;
今まで何度か変更しており、今後も変わる可能性がある。