postcss-font-grabber

Postcss Font Grabber

This is a PostCSS plugin, only do one thing:

Grab remote font in @font-face, download it and update your CSS.

Boom.

Example

Before using:

@font-face {
    font-family : 'fake font';
    src         : url('https://font-site.com/beautiful-font.woff');
}

After using:

@font-face {
    font-family : 'fake font';
    src         : url('local-font/beautiful-font.woff');
}

Of cource, the beautiful-font.woff file is in your local-font/ folder now.

Usage

Gulp

gulp.task('css', function () {
    var postcss            = require('gulp-postcss');
    var postcssFontGrabber = require('postcss-font-grabber');

    return gulp.src('src/**/*.css')
        .pipe(postcss([
            postcssFontGrabber() // I'm here
        ]))
        .pipe(gulp.dest('build/'));
});

Webpack

Use postcss-loader:

import postcssFontGrabber from 'postcss-font-grabber';

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: () => {
        return [
            postcssFontGrabber() // I'm here
        ];
    }
}

Options

Function postcssFontGrabber takes an object of options as parameter:

postcssFontGrabber({ base: '../css/build/font/' })

base

Type: String

The folder to save font file to, it's the same folder as the output CSS file is in by default.

Roadmap

1. Grab local file.

2. Rename font file name automatically (Configurable).

3. Just replace the rule, do not download the font file.

License

Licensed under the APACHE LISENCE 2.0.

Credits

PostCSS