postcss-font-family-system-ui
postcss-font-family-system-ui lets you use system-ui
in CSS, following the
CSS Fonts Module Level 4 specification.
body {
font: 100%/1.5 system-ui;
}
body {
font: 100%/1.5 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
}
Usage
Add postcss-font-family-system-ui to your build tool:
npm install postcss-font-family-system-ui --save-dev
Node
Use postcss-font-family-system-ui to process your CSS:
import postcssSystemUiFont from 'postcss-font-family-system-ui';
postcssSystemUiFont.process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use postcss-font-family-system-ui as a plugin:
import postcss from 'gulp-postcss';
import postcssSystemUiFont from 'postcss-font-family-system-ui';
postcss([
postcssSystemUiFont()
]).process(YOUR_CSS);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use postcss-font-family-system-ui in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssSystemUiFont from 'postcss-font-family-system-ui';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssSystemUiFont()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use postcss-font-family-system-ui in your Gruntfile:
import postcssSystemUiFont from 'postcss-font-family-system-ui';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssSystemUiFont()
]
},
dist: {
src: '*.css'
}
}
});
Options
family
The family
option defines the fallback families used to polyfill system-ui
.
It accepts an array or a comma-separated string.
import postcssSystemUiFont from 'postcss-font-family-system-ui';
postcssSystemUiFont({
family: 'system-ui, Segoe UI, Roboto, Helvetica Neue'
});