https://github.com/goblindegook/gulp-font2css
Encode font files as CSS @font-face rules using Gulp.
https://github.com/goblindegook/gulp-font2css
Last synced: about 2 months ago
JSON representation
Encode font files as CSS @font-face rules using Gulp.
- Host: GitHub
- URL: https://github.com/goblindegook/gulp-font2css
- Owner: goblindegook
- License: mit
- Created: 2016-01-02T05:24:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T07:16:35.000Z (over 2 years ago)
- Last Synced: 2025-03-23T18:50:14.229Z (2 months ago)
- Language: JavaScript
- Size: 427 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-font2css [](https://travis-ci.org/goblindegook/gulp-font2css)
Encode font files as CSS using [Gulp](http://gulpjs.com).
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](http://jaicab.com/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](https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7).
## Install
```
$ npm install --save-dev gulp-font2css
```
## Usage
```js
var gulp = require('gulp')
var concat = require('gulp-concat')
var font2css = require('gulp-font2css').default
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:
`[-][-].<extension>`
* Font `<family>` can be hyphenated as long as there are no matching `<style>` or `<weight>` words in it.
* Font weight should be one of `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`. You may also provide a [commonly used weight name](http://www.w3.org/TR/css3-fonts/#font-weight-numeric-values) (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`
* `My-Lato-italic.woff`
The plugin will ignore any unknown keywords.
## Options
This plugin has no options.
## License
MIT © [Luís Rodrigues](https://github.com/goblindegook)