Home

Awesome

PostCSS Font Weights <img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">

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 WeightNumeric Value
thin100
extralight200
ultralight200
light300
book400
normal400
regular400
roman400
medium500
semibold600
demibold600
bold700
extrabold800
ultrabold800
black900
heavy900

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:

NodePostCSS CLIWebpackCreate React AppGulpGrunt

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