stylus-font-face
Stylus plugin that generates bulletproot @font-face syntax optionally with data url.
Usage
Install using npm
npm install -S stylus-font-face
See Nib usage and installation.
First you have to tell stylus about the plugin:
var fontFace = ;stylus;
or if you are using command line:
stylus --use ./node_modules/stylus-font-face
Then you can use it in your stylus files
@import 'font-face' family-name, font-name)family-name, font-name)
API
Both font-face
and font-face-inline
take the same parameters:
family
- font family name that you want to use in CSSfile
- base name of the file - optional defaults tofamily
path
- defaults tofonts
- assumes that font files are located infonts
directory relative to your.styl
fileweight
- font weight - defaults tonormal
style
- font style - defaults tonormal
Generated CSS
font-face
generates:
font-face-inline
attempts to inline fonts directly in CSS as BASE64 data:
Only .woff
and .ttf
are inlined and only. By default only files smaller than 10000k are inlined, but that can be changed by passing a limit
option to stylus.
stylus --use ./node_modules/stylus-font-face --with {limit:80000}
You can run make check
and examine `test/main.css' file to see the how the macros work with real fonts.
Example fonts were generated by Icomoon app.
License
MIT