font-familyを見たくて仕方がない

Webであろうが、紙媒体であろうが、映像であろうが「これはなんのフォントだろう？」と気になる人間なので、Smart相談室に入社した直後もすぐCSSをガサゴソと漁ります（勉強のためですからね！！）

...あった！！！

一部抜粋だよ

font-family: "Noto Sans Japanese", -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;

先頭に燦然と輝くNoto Sans Japanese ...嬉しい。一番好きなWebフォントだから。

Noto Sansとは？

そもそも「Noto」は「No Tofu（豆腐無し）」という意味で付けられています。
ここで言う豆腐とは食べる豆腐ではなく、コンピュータで表示できない文字を□で表現することを通称”豆腐”と読んでいます。
つまり、この”豆腐”で表示される文字を無くそう！という強い意志で開発されたすごいフォントなのです。

-apple-system / BlinkMacSystemFont ってどんなフォント？

Noto Sansの次に読み込まれている、 -apple-system / BlinkMacSystemFont というフォントは実際には存在せず、Appleのシステムフォント（San Francisco）を指します。

BlinkMacSystemFont はBlink系のブラウザ向け（Chrome等）にAppleのシステムフォントを有効にするための記述です。

ちなみにAndroid用のフォント指定はしていません。OSバージョンやメーカーによって標準の日本語フォントが異なるためです。

後半のフォント指定はどういう意味？

ヒラギノ角ゴ Pro はMacOSの標準的な日本語フォント
メイリオ はWindowsの標準的な日本語フォント
として設定されています。

最後のsans-serif は何も該当するフォントが見当たらなかった場合にデフォルトの書体（ゴシック体）が適用されます。

【おまけ】いろんなサイトのfont-familyを気にしてみよう

特にターゲットとなる年代やジャンルがあるようなサイトの場合、違いが顕著に出ます。
例えばこちらのお寺のサイト

日本語ではUD黎ミンLが採用されています。

英語ではCormorant Garamondが採用されています。

お寺の持つイメージ（しずかで、厳かな）を大事にしてフォントが選ばれています。

また、近年ではWebフォントでもUD（ユニバーサルデザイン）フォントが扱えるようになったため、よりユーザに配慮したフォント選びができるようになりました

みなさんも是非ポスターやチラシ、雑誌だけでなくWebページのフォントも気にして見てみてください