PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list
CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

postcss-font-family-system-ui PostCSS Logo

NPM Version CSS Standard Build Status Windows Build Status Greenkeeper Gitter Chat

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;
}

/* becomes */

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(/* options */)
]).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(/* options */)
  ])
).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(/* options */)
      ]
    },
    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' // use less fallbacks
});