bulletproof @font-face in stylus
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
History.md
Makefile
Readme.md
index.styl
package.json

Readme.md

NPM version Dependency Status

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 = require('stylus-font-face');
stylus.use(fontFace());

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'

font-face(family-name, font-name)
font-face-inline(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 CSS
  • file - base name of the file - optional defaults to family
  • path - defaults to fonts - assumes that font files are located in fonts directory relative to your .styl file
  • weight - font weight - defaults to normal
  • style - font style - defaults to normal

Generated CSS

font-face generates:

@font-face {
  font-family: 'font-icon';
  src:url('fonts/iconfont.eot');
  src:url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/iconfont.woff') format('woff'),
    url('fonts/iconfont.ttf') format('truetype'),
    url('fonts/iconfont.svg#font-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

font-face-inline attempts to inline fonts directly in CSS as BASE64 data:

@font-face {
  font-family: 'font-icon';
  src: url('iconfont.eot?') format('embedded-opentype');
  }

@font-face {
  font-family: 'font-icon';
    url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
    url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
    url('iconfont.svg#font-icon') format('svg');
}

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