Package Exports

postcss-font-weights

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-font-weights) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Font Weights

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

/* before */

body {
   font: light 100%/1.5;
}

.heading {
   font-weight: medium;
}

/* after */

body {
   font: 300 100%/1.5;
}

.heading {
   font-weight: 500;
}

Common font weights are found in the Font Weight Numeric Values section of the W3C 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 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: a PostCSS plugin:

postcss([
    require('postcss-font-weights')()
]);

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('./css/src/*.css').pipe(
        postcss([
            require('postcss-font-weights')()
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

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: {
            processors: [
                require('postcss-font-weights')()
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});