はじめに

font-familyの指定を見ていて、知らなさすぎたので超ざっくりまとめました

`font-family`について理解したこと・注意点

font-familyは、左から順番探して、最初に見つかったフォントが利用される
デバイスに標準搭載されていないフォントの場合、そのフォントを持ってる人は表示されて、持ってない人は表示されない
欧文フォントを指定したい場合、欧文 → 和文の順番にする
- 和文フォントはアルファベットを含んでいるため

指定方法と反映のされ方は、ざっくり理解しました
font-familyの中身にはどんなものが入るのか見ていきます↓

総称フォント

OSやブラウザごとにデフォルト設定されたフォントが自動的に適用される
たいてい、指定したフォントファミリーがデバイスに入っていない場合の最後の砦になる

メリット：表示速度を損なわない
デメリット：デフォルトのフォントが変化した際、意図しない表示になる可能性がある

例

sans-serif：ゴシック体
serif：明朝体
system-ui：OSのUIと同じフォント
- OSが最適と判断するフォントを自動で選択してくれる！
monospace：等幅フォント

ゴシック体 or 明朝体は最低限指定する
（指定しないとデフォルトが適用されて、OS/ブラウザによっては明朝体になってしまう）

フォントの分類・特徴

デバイスフォント

ユーザーのデバイスに元からインストールされているフォント

メリット：表示速度を損なわない、費用が必要ない
デメリット：ユーザーの環境に依存するため、意図した表示にならない可能性がある

Windowsの例

Meiryo（メイリオ）

Windows Vista以降のシステム表示用に採用されたフォント
Segoe UIと見た目の相性がよく、表示の統一感が出る

游ゴシック

WindowsとMacの両方で使えるので、WindowsとMacで同じ見栄えにできる
font-weight: normal(400)が、WindowsとMacで微妙に違うので、Windowsだと掠れて表示されることがある
- Windows版が、Mac版よりも細い
- font-weightを明示的に指定すると、太さが揃う

WindowsとMacで微妙に名前が違うので指定注意する
Windows：Yu Gothic or 游ゴシック
Mac：YuGothic or 游ゴシック体

Segoe UI

Microsoft のブランドフォントSegoe の、画面表示用に特別に設計されたver

2025年3月から、Windows 10,11で、Noto系も提供されているようです
Windowsで、Macの表示に寄せたい場合は、ぜひ試してみてください

MacOSの例

ヒラギノ角ゴシック

文字が潰れにくくて読みやすい
Windowsには搭載なし

SF Pro

Appleプラットフォームのシステムフォント
ラテン文字、ギリシャ文字、キリル文字を含む150以上の言語をサポート
多様化するデバイスに対応するため、開発されたSFフォントの派生
- 元々使用していた「Helvetica Neue」は、文字サイズ小さいと読みにくかった（Apple Watchだと見にくい）

Androidの例

Noto Sans CJK JP

日本語の標準フォント
GoogleとAdobeが共同で開発
中国、韓国語もカバーしてくれる

Roboto

Googleが開発したオープンソースの欧文フォント
Android,Chrome OSのデフォルトフォント
文字間狭め

Webフォント

Webサーバーに置かれたフォントファイルを、ブラウザが読み込んで表示するフォント
Google Fontsを利用すると、ライセンスの心配が無い

メリット：どんな環境でも意図したフォントを表示できる
デメリット：フォントを読み込んで表示する分、表示速度が遅い

日本語フォントは文字数が多く、容量重いので注意！

使用する文字だけを抜き出したフォントファイル（サブセット）を作成することで、容量問題は防げるようです。

（例）

Zen Kaku Gothic New

全体的にクセがない＋モダンな雰囲気で良き
文字が小ぶりなので、文章を読ませるサイトに良いかもです

フォントを選ぶ際に考慮すること

Webサイトを構成するという観点では、以下が大事そうです

容量が肥大化しないか
長期的に見て、保守のために工数がかからないか
ページの表示速度を損なわないか
ページのコンセプトに合っているか
違う端末でも印象が変わらないか

まとめ

標準搭載のフォントはアップデートによって変わっていくので、日々チェックが必要そうです...
何事も日々チェックだ...

おまけ

タイポグラフィが印象的なサイトをまとめて見ることができます！
テキストを個性的にしたい時には要チェック

参考