/postcss-font-weights

Use common font weights in CSS

Primary LanguageCSSCreative Commons Zero v1.0 UniversalCC0-1.0

PostCSS Font Weights PostCSS

NPM Version Build Status Support Chat

PostCSS Font Weights lets you do this in CSS.

h1, h2, h3 {
  font-weight: light;
}

pre {
   font: light 100% monospace;
}

/* becomes */

h1, h2, h3 {
  font-weight: 300;
}

pre {
   font: 300 100% monospace;
}

Common font weights are found in the Font Weight Numeric Values section of the CSS Fonts Specification.

Common Weight Numeric Value
thin 100
extralight 200
ultralight 200
light 300
book 400
normal 400
regular 400
roman 400
medium 500
semibold 600
demibold 600
bold 700
extrabold 800
ultrabold 800
black 900
heavy 900

These common font weights are converted to their numeric counterpart.

Usage

Add PostCSS Font Weights to your project:

npm install postcss-font-weights --save-dev

Use PostCSS Font Weights to process your CSS:

const postcssFontWeights = require('postcss-font-weights');

postcssFontWeights.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssFontWeights = require('postcss-font-weights');

postcss([
  postcssFontWeights(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Font Weights runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

prefix

The prefix option determines the prefix applied to properties being processed (e.g. x for -x-font-weight). Wrapping dashes (-) are automatically applied.

custom

The custom option determines additional font weight keywords and numeric pairs (e.g. custom: { lite: 300 } for font-weight: lite to become font-weight: 300).