Font Weights

Font Weights lets you use common font weights in your CSS.

/* before */

.example-1 {
    font-weight: light;
}

.example-2 {
   font: light 100% monospace;
}

/* after */

.example-1 {
    font-weight: 300;
}

.example-2 {
   font: 300 100% monospace;
}

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

These common font weights are converted to their numeric counterpart.

Options

prefix

Type: String
Default: ""

Adds an optional prefix to the color property (e.g. "x" for -x-color). Wrapping dashes (-) are automatically applied.

custom

Type: Object
Default: undefined

Adds an additional set of keyword and numeric pairs (e.g. custom: { lite: 300 } for font-weight: lite to become font-weight: 300).

Usage

Add Font Weights to your build tool:

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

Node

require('postcss-font-weights').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Font Weights as a PostCSS plugin:

postcss([
    require('postcss-font-weights')()
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Font Weights within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-font-weights')()
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Font Weights within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            use: [
                require('postcss-font-weights')()
            ]
        },
        dist: {
            src: '*.css'
        }
    }
});