gulp-font2css
v0.1.2
Published
Encode font files as CSS using Gulp.
Downloads
71
Maintainers
Readme
gulp-font2css
Encode font files as CSS using Gulp.
This plugin automates the conversion of font files into a series of @font-face
declarations containing each font encoded in base64. It draws inspiration from localFont by Jaime Caballero.
The resulting CSS files are then used to implement localStorage
caching of web fonts, using a deferred loading script such as this one employed by Smashing Magazine.
Install
$ npm install --save-dev gulp-font2css
Usage
var gulp = require('gulp')
var concat = require('gulp-concat')
var font2css = require('gulp-font2css')
gulp.task('fonts', function() {
return gulp.src('src/fonts/**/*.{otf,ttf,woff,woff2}')
.pipe(font2css())
.pipe(concat('fonts.css'))
.pipe(gulp.dest('dist/'))
})
Input files
@font-face
property values are determined by the input file names, which must obey the following naming scheme with dash-separated attributes:
<family>[-<weight>][-<style>].<extension>
Font weight should be one of 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
. You may also provide a commonly used weight name (except normal
) that maps to one of these values.
Font style should be one of normal
, italic
or oblique
.
For example, the following are valid names:
Lato.woff
Lato-italic.woff
Lato-bold.woff
Lato-700.woff
Lato-thin-italic.woff
Lato-100-italic.woff
The plugin will ignore any unknown keywords.
Options
This plugin has no options.
License
MIT © Luís Rodrigues