PostCSS Font Weights

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).

Current Tags