System font
OSのシステムフォントを使用することで、プラットフォームネイティブな見た目と高速なテキスト描画を実現する宣言です。外部フォントのダウンロードが不要なため、パフォーマンスが向上します。macOSではSan Francisco、WindowsではSegoe UI、AndroidではRobotoが使用され、各OSに馴染んだ自然なテキスト表示になります。
概要
OSのシステムフォントを使用することで、プラットフォームネイティブな見た目と高速なテキスト描画を実現する宣言です。外部フォントのダウンロードが不要なため、パフォーマンスが向上します。macOSではSan Francisco、WindowsではSegoe UI、AndroidではRobotoが使用され、各OSに馴染んだ自然なテキスト表示になります。
対応ブラウザ
デスクトップ
Chrome 56+
Edge 79+
Safari 11+
Firefox 92+
モバイル
Chrome Android 56+
Safari iOS 11+
Firefox Android 92+
基本構文
CSS
body {
font-family: system-ui, -apple-system,
sans-serif;
}
.ui-text {
font-family: system-ui;
}実務での使いどころ
-
高速フォント読み込みのUI
WebアプリのUI部分にsystem-uiを使用し、外部フォントの読み込みなしで即座にテキストを表示してFOUTを防ぎます。
注意点
- -apple-systemプレフィックスは古いSafari向けのフォールバックとして併記することを推奨します。
アクセシビリティ
- システムフォントはOSのアクセシビリティ設定（文字サイズ、太字テキスト等）を自然に反映するため、アクセシビリティの観点からも推奨されます。