PostCSS System UI Font Family

npm install @csstools/postcss-system-ui-font-family --save-dev

PostCSS System UI Font Family lets you use the system-ui keyword following the CSS Fonts 4 Specification.

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui;
    --font-family: system-ui;
}

/* becomes */

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

Usage

Add PostCSS System UI Font Family to your project:

npm install postcss @csstools/postcss-system-ui-font-family --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssSystemUIFontFamily = require('@csstools/postcss-system-ui-font-family');

postcss([
    postcssSystemUIFontFamily(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssSystemUIFontFamily({ preserve: false })

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui;
    --font-family: system-ui;
}

/* becomes */

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

Changes to PostCSS System UI Font Family

2.0.0

January 14, 2026

Updated: Support for Node 20.19.0 or later (major).

Removed: commonjs API. In supported Node versions require(esm) will work without needing to make code changes.

Updated @csstools/css-tokenizer to 4.0.0 (major)

Updated @csstools/css-parser-algorithms to 4.0.0 (major)

Package detail

@csstools/postcss-system-ui-font-family

readme