@font-face/node
Gerenate @font-face CSS stylesheet like a pro !!
Last updated 4 months ago by ppiyush13 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @font-face/node 
SYNC missed versions from official npm registry.

@font-face/node

Generate @font-face CSS stylesheet like a pro !!

Install

Using NPM:

npm install @font-face/node --save-dev

Motivation

  • Lets admit that it is very tedious job to manually generate @font-face CSS rules with corret URL sources for a given font files stored in local project directory.

  • In order to apply fonts across all the browsers, we may need to maintain more that one font format.

  • Online interactive web directory for fonts, like Google Fonts, auto generates CSS stylesheet with @font-face rules, making it quite popular amoung front-ends developers.

  • For locally stored font files, @font-face/node is an attempt to auto generate @font-face rules with given configurations to relieve developers from manually configuring fonts for every project.

  • @font-face/node scans input font directory (provided in configs) and produces appropriate src CSS descriptor for various font formats like eot, woff, woff2 and svg

  • @font-face/node also copies font files to build / dist directory provided in configs.

  • Utilize output font-face.css with webpack loaders to include fonts in output bundle.

Usage

@font-face/node can be invoked from CLI or API

CLI usage

Create a configuration file in the root project directory.
@font-face/node uses cosmiconfig to read a configuration which can be configured with any of the following names:

  • .font-facerc
  • .font-facerc.json
  • .font-facerc.yaml
  • .font-facerc.yml
  • .font-facerc.js
  • font-face.config.js
  • fontFace in package.json

And then simply execute:

$ font-face

OR using NPX command:

$ npx font-face

Example

Lets assume we have following directory structure:

- Root
    * font-face.config.js
    * package.json
    - node_modules
    - src
        - fonts
            * Roboto-Light.ttf
            * Roboto-Light.woff2
            * Roboto-Medium.ttf
            * Roboto-Medium.woff2
            * Roboto-Regular.ttf
            * Roboto-Regular.woff2

- indicates directory
* indicates file

We have defined configurations as follows:

// font-face.config.js

module.exports = {
    input: {
        dir: './src/fonts',
    },
    output: {
        dir: './dist',
        resourceDir: './dist/fontResources',
        cssFileName: 'font-face.css',
    },
    fonts: [
        {
            name: 'Roboto',
            weight: 200,
            style: 'normal',
            file: 'Roboto-Light',
        },
        {
            name: 'Roboto',
            weight: 400,
            style: 'normal',
            file: 'Roboto-Regular',
        },
        {
            name: 'Roboto',
            weight: 600,
            style: 'bold',
            file: 'Roboto-Medium',
        },
    ],
};

Upon executing font-face command we get following directory structure:

- Root
    * font-face.config.js
    * package.json
    - node_modules
    - dist
        * font-face.css
        - fontResources
            * Roboto-Light.ttf
            * Roboto-Light.woff2
            * Roboto-Medium.ttf
            * Roboto-Medium.woff2
            * Roboto-Regular.ttf
            * Roboto-Regular.woff2
    - src
        - fonts
            * Roboto-Light.ttf
            * Roboto-Light.woff2
            * Roboto-Medium.ttf
            * Roboto-Medium.woff2
            * Roboto-Regular.ttf
            * Roboto-Regular.woff2

Contents of font-face.css:

    @font-face { 
        font-family: 'Roboto'; 
        font-weight: 200; 
        font-style: normal; 
        src: url('fonts/Roboto-Light.woff2') format('woff2') , 
            url('fonts/Roboto-Light.ttf') format('truetype'); 
    }
    @font-face { 
        font-family: 'Roboto'; 
        font-weight: 400; 
        font-style: normal; 
        src: url('fonts/Roboto-Regular.woff2') format('woff2') , 
            url('fonts/Roboto-Regular.ttf') format('truetype'); 
    }
    @font-face { 
        font-family: 'Roboto'; 
        font-weight: 600; 
        font-style: bold; 
        src: url('fonts/Roboto-Medium.woff2') format('woff2') ,
            url('fonts/Roboto-Medium.ttf') format('truetype'); 
    }

Please note:

  1. Actual output does not include newlines, for verbosity it has been added here.
  2. Depending on your platform , ie win32 or posix, appropriate path with appropriate slash will be generated.

API usage

@font-face/node exports a function which will generate CSS file and copy fonts to dist / build folder. Above similar output could be produced using node API as shown below:

    const fontFaceNode = require('@font-face/node');

    fontFaceNode({
        input: {
            dir: './src/fonts',
        },
        output: {
            dir: './dist',
            resourceDir: './dist/fontResources',
            cssFileName: 'font-face.css',
        },
        fonts: [
            {
                name: 'Roboto',
                weight: 200,
                style: 'normal',
                file: 'Roboto-Light',
            },
            {
                name: 'Roboto',
                weight: 400,
                style: 'normal',
                file: 'Roboto-Regular',
            },
            {
                name: 'Roboto',
                weight: 600,
                style: 'bold',
                file: 'Roboto-Medium',
            },
        ],
    });

Options

input.dir

Type: String
Input font directory.

output.dir

Type: String
Output directory for generated CSS file. Though this option is redundant but this has been added to make it consistend with input.dir.

output.resourceDir

Type: String
Default: <input.dir>/resources
Fonts will be copied from input.dir to here. Usually this must be sub-directory within your build / dist directory.

output.cssFileName

Type: String
Default: font-face.css
Output CSS file name.

output.fonts

Type: List
List of font configs.
Following options are available under font config:

  • name - Mandatory font-family name.
  • weight - font-weight
  • display - font-display
  • stretch - font-stretch
  • style - font-style
  • variant - font-variant
  • unicodeRange - unicode-range
  • featureSettings - font-feature-settings
  • variationSettings - font-variation-settings

Also see

@font-face/core - Core module to create CSS @font-face rule.
@font-face/browser - Include fonts dynamically through configs in browser.

Current Tags

  • 1.0.3                                ...           latest (4 months ago)

3 Versions

  • 1.0.3                                ...           4 months ago
  • 1.0.2                                ...           4 months ago
  • 1.0.1                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (11)
Dev Dependencies (1)
  • np ^5.2.1
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |