stylus-font-face

@font-face generator plugin for stylus


Keywords
stylus, font-face
License
MIT
Install
npm install stylus-font-face@1.2.0

Documentation

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