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 : 'beautiful-font';
    src         : url('https://font-site.com/beautiful-font.woff');
}

After using:

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

And 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"
            },

            //
            // Let Webpack support font file
            //
            {
                test: /\.(svg|ttf|eot|woff|woff2)$/,
                loader: 'file-loader'
            }
        ]
    },
    postcss: () => {
        return [
            postcssFontGrabber() // I'm here
        ];
    }
}

Options

Function postcssFontGrabber takes an object of options as parameter:

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

dirPath

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 PostCSS Copy Assets