Noosphere Possibilities Maximized
Miss any of our Open RFC calls?Watch the recordings here! »

postcss-system-monospace

3.0.0 • Public • Published

PostCSS System Monospace PostCSS

Monospace fonts from your operating system

NPM Version Build Status 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-system-monospace
 
# or yarn 
yarn add --dev 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

Install

npm i postcss-system-monospace

DownloadsWeekly Downloads

8

Version

3.0.0

License

MIT

Unpacked Size

8.77 kB

Total Files

6

Last publish

Collaborators

  • avatar