PostCSS System Monospace

Monospace fonts from your operating system

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

• Nick Galbreath for his articles on operating system monospace fonts and their use with CSS, CSS System Font Stack Monospace v1 & CSS System Font Stack Monospace v2

License