Nonstop Perpetual Motion
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    stylus-font-facepublic

    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

    install

    npm i stylus-font-face

    Downloadslast 7 days

    38

    version

    1.2.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar