system-ui value for font-family

Overview

The font-family-system-ui property sets a default value of the font family. It may be used to supply a user interface font as fallback when none is specified, such as in cases of font formatting that blocks or otherwise fails to parse correctly.

Formal Definition

Specifications

CSS Fonts Module Level 4 # generic-font-families CSS Fonts Module Level 4 # font-family-prop

Syntax

/* A font family name and a generic family name */
 font-family: "Gill Sans Extrabold", sans-serif;
 font-family: "Goudy Bookletter 1911", sans-serif;
 /* A generic family name only */
 font-family: serif;
 font-family: sans-serif;
 font-family: monospace;
 font-family: cursive;
 font-family: fantasy;
 font-family: system-ui;
 font-family: ui-serif;
 font-family: ui-sans-serif;
 font-family: ui-monospace;
 font-family: ui-rounded;
 font-family: emoji;
 font-family: math;
 font-family: fangsong;
 /* Global values */
 font-family: inherit;
 font-family: initial;
 font-family: revert;
 font-family: unset;

Code snippets

index.html

Source:index.html

custom.css

Source:custom.css

style__text-font.css

Source:style__text-font.css

Browser Compatibility