gulp-gfonts
A gulp plugin for smart downloading fonts from Google Fonts© and generating CSS for/with them
Usage
- Install
gulp-gfonts
(as a development dependency in most cases):
npm install --save-dev gulp-fonts
- Create json-file with definitions for needed fonts:
{ "Roboto": ["300", "300i", "500", "800"] }
or
{ "Open Sans": "300,300i,500,500i,800,800i" }
or just copy url's query from Google Fonts constructor
family=Roboto:500,100i|Open+Sans:100
- Then in
gulpfile.js
:
Use all avalilible formats
var gfonts = require('gulp-gfonts');
gulp.task('fonts', function () {
gulp.src('fonts.json')
.pipe(gfonts())
.pipe(gulp.dest('./dist'));
});
Pack woff2 fonts to css-file
gulp.task('fonts', function () {
gulp.src('fonts.json')
.pipe(gfonts({
embed: true,
formats: ['woff2']
}))
.pipe(gulp.dest('./dist'));
});
Pack fonts to css-file, download eot for <ie9 separately, concat css
gulp.task('fonts', function () {
s =
gulp.src('fonts.json')
.pipe(gfonts({
inCssBase: './fonts',
embed: true
}))
.pipe(gulp-hydra({
css: (f) => /.*\.css$/.test(f.path),
fonts: (f) => !(/.*\.css$/.test(f.path))
}));
s.fonts.pipe(gulp.dest('./static/fonts'));
merge2(
gulp.src('./app.styl').pipe(gulp-stylus()),
s.css
)
.pipe(gulp-concat('index.css'))
.pipe(gulp.dest('./static'));
});