postcss-system-monospace

4.0.0 • Public • Published

PostCSS System Monospace PostCSS

Monospace fonts from your operating system

NPM Version Dependency Status

Most systems have their own monospace font which font-family: monospace does not observe. This PostCSS plugin gives the ability to use the client system's monospace font via CSS.

/* input */
.example {
  font-family: system-monospace;
}
/* output */
.example {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Check out the visual test.

Install

# npm
npm install --save-dev postcss postcss-system-monospace

# or yarn
yarn add --dev postcss postcss-system-monospace

Usage

Add it to your PostCSS work-flow, whatever way you choose to.

// Using a postcss.config.js
const systemMonospace = require('postcss-system-monospace');

module.exports = {
  plugins: [
    systemMonospace
  ]
};

Then use the font-family name system-monospace where ever needed.

.code {
  font-family: system-monospace;
}

Fonts

name system
SFMono-Regular macOS
Menlo macOS & iOS
Monaco macOS
Consolas Windows
Liberation Mono Linux
Courier New fallback
monospace fallback

Credits

License

Package Sidebar

Install

npm i postcss-system-monospace

Weekly Downloads

7

Version

4.0.0

License

MIT

Unpacked Size

10 kB

Total Files

8

Last publish

Collaborators

  • philipbordallo