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