@font-face generator plugin for stylus

npm install stylus-font-face
3 downloads in the last week
13 downloads in the last month


Stylus plugin that generates bulletproot @font-face syntax optionally with data url.


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-fave');

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)


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

Generated CSS

font-face generates:

@font-face {
  font-family: 'font-icon';
  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 if they are smaller than 10k.

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.



npm loves you