Webフォントのネットワーク遅延なしに、OSネイティブの高速な描画を実現するCSSシステムフォントスタックの指定早見表。
汎用システムフォントスタック
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
プラットフォーム別フォント対応表
| 指定トークン / フォント名 | 対象OSおよびブラウザ |
|---|---|
-apple-system |
macOS および iOS の Safari (San Francisco) |
BlinkMacSystemFont |
macOS 上の Chrome / Blink エンジン |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
モダン Android および ChromeOS |
Oxygen |
KDE デスクトップ環境の Linux |
Ubuntu |
Ubuntu Unity / GNOME 環境の Linux |
Cantarell |
GNOME 3+ 環境の Linux |
"Fira Sans" |
Firefox OS / Mozilla 関連環境 |
"Droid Sans" |
レガシー Android デバイス |
"Helvetica Neue" |
macOS 10.9 (Mavericks) および 10.10 (Yosemite) |
sans-serif |
汎用フォールバックの sans-serif フォント |
最新の標準総称キーワード (system-ui)
CSS Fonts Module Level 4 では、最新ブラウザで標準化された総称キーワードが利用可能です：
body {
font-family: system-ui, sans-serif;
}