Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

System font

OSのシステムフォントを使用することで、プラットフォームネイティブな見た目と高速なテキスト描画を実現する宣言です。外部フォントのダウンロードが不要なため、パフォーマンスが向上します。macOSではSan Francisco、WindowsではSegoe UI、AndroidではRobotoが使用され、各OSに馴染んだ自然なテキスト表示になります。

システムフォントパフォーマンス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.font-family.system-ui
56
79
92
11
56
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • 以前は別名で対応していました: -apple-system (43)
実装メモ
  • macOS でのみサポートされます。
注釈 1件
対応条件
  • 以前は別名で対応していました: -apple-system (9)
注釈 1件
対応条件
  • 以前は別名で対応していました: -apple-system (9)

基本構文

CSS 
body {
  font-family: system-ui, -apple-system,
    sans-serif;
}
.ui-text {
  font-family: system-ui;
}

ライブデモ

system-ui

CSS System-ui demo.

プレビュー全画面表示

Uitext

CSS UItext demo.

プレビュー全画面表示

Fallback

CSS fo-back demo.

プレビュー全画面表示

実務での使いどころ

  • 高速フォント読み込みのUI

    WebアプリのUI部分にsystem-uiを使用し、外部フォントの読み込みなしで即座にテキストを表示してFOUTを防ぎます。

注意点

  • -apple-systemプレフィックスは古いSafari向けのフォールバックとして併記することを推奨します。

アクセシビリティ

  • システムフォントはOSのアクセシビリティ設定（文字サイズ、太字テキスト等）を自然に反映するため、アクセシビリティの観点からも推奨されます。

参考リンク