Webフォントとシステムフォント — 使い分けとCSS font-familyスタックの設計
フォント設計はWebサイトの読みやすさとパフォーマンスを左右する重要な要素です。Webフォント（Google Fontsなど）とシステムフォントにはそれぞれ長所と短所があります。font-familyスタックを正しく設計することで両方の利点を活かせます。
システムフォントスタックとは
システムフォントスタックはユーザーのOSにインストール済みのフォントを優先順位付きで指定する書き方です。`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`はMacはSan Francisco、WindowsはSegoe UI、AndroidはRobotoをそれぞれ使い、未インストールの場合は次のフォントにフォールバックします。Webフォントを読み込む必要がなく高速です。
Canvas APIでのフォント検出
JavaScriptからシステムフォントのインストール状態を確認するにはCanvas APIを使います。デフォルトのmonospaceフォントで文字を描画した幅と、テスト対象フォントを指定した幅を比較し、幅が変わればそのフォントがインストールされていると判定できます。完全に確実ではありませんが、多くのフォントで有効な手法です。
等幅フォントの選択
コードエディタ・ターミナル・プリフォーマットテキストには等幅フォントが必要です。MacではMenlo（標準）やMonaco、WindowsではCascadia Code（VS Code標準）やConsolas、LinuxではUbuntu Monoがよく使われます。プログラミング向け等幅フォントにはリガチャ対応のFira Code・JetBrains Monoもあり、`font-feature-settings: "liga" 1`で記号の合字が有効になります。
日本語フォントスタックの設計
日本語環境では英字フォントの後に日本語フォントを指定します。`font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif`のように英字フォントを先に書くと、英数字に英字フォントが使われ日本語にのみ日本語フォントが使われます。Windowsで正確なフォントを指定するには`"BIZ UDPGothic"`や`"Meiryo"`を加えると安心です。