@font-face generator plugin for stylus
Last updated 2 years ago by pirxpilot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install stylus-font-face 
SYNC missed versions from official npm registry.

NPM version Dependency Status


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

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
  • 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?#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.



Current Tags

  • 1.2.0                                ...           latest (2 years ago)

6 Versions

  • 1.2.0                                ...           2 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (0)

Copyright 2014 - 2016 © |