4.0.0 • Published 3 years ago

postcss-system-monospace v4.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

PostCSS System Monospace

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

namesystem
SFMono-RegularmacOS
MenlomacOS & iOS
MonacomacOS
ConsolasWindows
Liberation MonoLinux
Courier Newfallback
monospacefallback

Credits

License