Last updated on : 2022-04-10
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.
Inherited
yes
Applies to
all elements. It also applies to ::first-letter and ::first-line.
Initial value
depends on user agent
Animation type
discrete
Computed value
as specified
CSS Fonts Module Level 4 # generic-font-families CSS Fonts Module Level 4 # font-family-prop
/* 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;
Browser Support For Safari on iOS Versions
Browser Support For Android Browser Versions
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Browser Support For Samsung Internet Versions
Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for system-ui value for font-family and many more web technologies that are a part of your website or web-application.
Last Modified date
2022-04-10
Data sourced from
Test this and other features on your website for compatibility across
3,000 real browsers and devices using
I hope we're able to help you build browser compatible web experience.
Fast track your browser testing experience on 3000+ browsers and OS combinations with LambdaTest.
Sarah Elson (Product & Growth Lead)