Have ideas to improve npm?Join in the discussion! »

    postcss-webfont

    3.1.1 • Public • Published

    postcss-webfont

    npm GitHub license

    postcss-webfont is PostCSS plugin for generating web fonts from stylesheets.

    Installation

    npm

    npm install postcss-webfont --save-dev

    yarn

    yarn add postcss-webfont --dev

    Usage

    const postcss = require('postcss');
    const webfont = require('postcss-webfont');
     
    const options = {
      outputPath: './dist/fonts/'
    };
     
    postcss([webfont(options)])
      .process(css)
      .then(function(result) {
        fs.writeFileSync('./dist/style.css', result.css);
      });

    Options

    basePath

    Your base path that will be used for svg files with absolute CSS urls.

    Type: String

    Default: ./

    outputPath

    Relative path to the directory that will keep your output font file.

    Type: String

    Default: ./

    stylesheetPath

    Relative path to the base directory that will keep your stylesheet file.

    Type: String

    Default: ./

    publishPath

    The url to the output directory resolved relative to the HTML page.

    Type: String

    Default: ``

    cachePath

    The cache file path of generated fonts.

    Type: String

    Default: .fontcache.json

    formats

    The output formats of font-face src property.

    Type: Array<String>

    Default: ['ttf', 'eot', 'woff']

    startUnicode

    Starting codepoint used for the generated glyphs.

    Type: Integer

    Default: 0xEA01

    prependUnicode

    Prefix files with their automatically allocated unicode code point.

    Type: Boolean

    Default: false

    verticalAlign

    The vertical-align property value.

    Type: String

    Default: middle

    classNamePrefix

    The generating class name prefix.

    Type: String

    Default: iconfont

    classNamePrefixBefore

    The generating class name prefix for before pseudo element.

    Type: String

    Default: before

    classNamePrefixAfter

    The generating class name prefix for after pseudo element.

    Type: String

    Default: after

    cachebuster

    The cachebuster type.
    To disable is specified null or undefined.

    Cachebuster types:

    • hash : Generating font hash.
    • fixed : Fixed cachebuster. The fixed value is specified cachebusterFixed option.

    Type: String

    Default: hash

    cachebusterFixed

    The fixed cachebuster value.

    Type: String

    Default: ``

    svgicons2svgfont options

    The options of svgicons2svgfont are available:

    • options.fontWeight
    • options.fontStyle
    • options.fixedWidth
    • options.centerHorizontally
    • options.normalize
    • options.fontHeight
    • options.round
    • options.descent

    Example

    ├─┬ css/
    │ └─ style.css
    ├── fonts/
    └─┬ svg/
      ├─ arrow-up-left.svg
      └─ arrow-up-right.svg
    

    style.css

    // before
    @font-face {
      font-family: 'font-awesome';
      src: url('./fonts/*.svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    // after
    @font-face {
      font-family: 'font-awesome';
      src:  url('./fonts/font-awesome.eot');
      src:  url('./fonts/font-awesome.eot#iefix') format('embedded-opentype'),
        url('./fonts/font-awesome.ttf') format('truetype'),
        url('./fonts/font-awesome.woff') format('woff'),
        url('./fonts/font-awesome.svg?#font-awesome') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
     
    [class^='iconfont-font-awesome-']::before[class*=' iconfont-font-awesome-']::before,
    [class^='iconfont-before-font-awesome-']::before[class*=' iconfont-before-font-awesome-']::before,
    [class^='iconfont-after-font-awesome-']::after[class*=' iconfont-after-font-awesome-']::after {
      font-family: 'font-awesome'sans-serif;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .iconfont-font-awesome-arrow-up-left::before {
      content: '\EA01';
    }
    .iconfont-before-font-awesome-arrow-up-left::before {
      content: '\EA01';
    }
    .iconfont-after-font-awesome-arrow-up-right::after {
      content: '\EA02';
    }

    Changelog

    License

    Install

    npm i postcss-webfont

    DownloadsWeekly Downloads

    15

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar