broccoli-sass-font-face
This is a broccoli plugin for the easy generation of @font-face rules.
Installation
npm install --save-dev broccoli-sass-font-face
Usage
Assume that you have several fonts in your project's webpub/fonts
directory:
~/project/$ ls -C webpub/fonts
headers.eot
headers.ttf
headers.woff
headers_bold.eot
headers_bold.ttf
headers_bold.woff
Add in your Brocfile.js
var fontFace = ;// This prefix will be removed from the each font URL:fontFacefont_root = 'webpub'; var fonts = ; // ... then pass this tree to the broccoli Sass plugin
The output file will contain something like this (you can see this if you export the fonts tree):
// File created with broccoli-sass-font-face at Mon Dec 22 2014 20:08:01 GMT+0700 (NOVT) ; ;
Generated mixins and variables can be imported in your Sass file as follows:
; h1, h2, h3, h4
If you pass to plugin a broccoli tree as first argument, you must to set a font_dir
option.
If you want to include automatically all generated mixins, you can set an include
option to true
.
Documentation
fontFace( inputTree, options )
options.output
{String}
Location of the output file with Sass mixins and variables.
[options.font_dir]
{String|null}
A path to the directory with fonts. Required, when the inputTree
is a broccoli tree, returned by another plugin.
Default value: null
[options.font_root]
{String|null}
A prefix which must be cut out from the each font URL
Default value: null
[options.include]
{Boolean}
If is set to true
, all generated mixins will be automatically included.
Default value: false
Important notes
- Supported font formats: TTF, WOFF, WOFF2, EOT. SVG fonts are deprecated and are not supported.
- Plugin takes the value for the
font-family
property only from ttf files for now. If the ttf file is not present for the group of fonts, the value will be a file basename.
License
This project is distributed under the MIT license.