fontfacegen webpack plugin Download - fontfacegen webpack plugin Source code download

fontfacegen webpack plugin

Font download

1.0.0

Download

fontfacegen-webpack-plugin

This plugin allows you to convert .ttf and .otf files into various other font formats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM package fontfacegen.

               fontfacegen
fontfile.ttf ---------------> fontfile.ttf
                              fontfile.eot
                              fontfile.svg
                              fontfile.woff
                              fontfile.woff2

Install

npm install fontfacegen
npm install fontfacegen-webpack-plugin

Usage

Require the module fontfacegen-webpack-plugin, create an instance of FontfacegenWebpackPlugin and pass the instance to the plugins array.

const FontfacegenWebpackPlugin = require('fontfacegen-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new FontfacegenWebpackPlugin({ tasks: ['fontfile.ttf', 'anotherfont.otf'] })
  ]
}

This will generate the following files:

dist/fontfile.eot
dist/fontfile.ttf
dist/fontfile.svg
dist/fontfile.woff
dist/fontfile.woff2
dist/anotherfont.eot
dist/anotherfont.ttf
dist/anotherfont.svg
dist/anotherfont.woff
dist/anotherfont.woff2

You can then reference these files in your code.

@font-face {
  src: url("dist/fontfile.eot");
  src: url("dist/fontfile.eot?#iefix") format("embedded-opentype"),
    url("dist/fontfile.woff2") format("woff2"),
    url("dist/fontfile.woff") format("woff"),
    url("dist/fontfile.ttf") format("ttf"),
    url("dist/fontfile.svg") format("svg");
  font-family: fontfile;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  src: url("dist/anotherfont.eot");
  src: url("dist/anotherfont.eot?#iefix") format("embedded-opentype"),
    url("dist/anotherfont.woff2") format("woff2"),
    url("dist/anotherfont.woff") format("woff"),
    url("dist/anotherfont.ttf") format("ttf"),
    url("dist/anotherfont.svg") format("svg");
  font-family: anotherfont;
  font-style: normal;
  font-weight: normal;
}

Documentation

The fontfacegen-webpack-plugin module default exports a single class: FontfacegenWebpackPlugin

An instance of this object is passed to the plugins array of webpack's config options.

The constructor takes an object as its first argument:

Property	Description
tasks	Array of directories or file paths.
	- Directory: Files with the extension `.ttf` and `.otf` in the directory will be converted.
	- File. That single file will be converted.
subset	A string or array with the characters desired to be included inside the generated fonts.