5.0.0 • Public • Published


npm npm Travis license

A Webpack loader that generates fonts from your SVG icons and allows you to use your icons in your HTML.

webfonts-loader uses the webfonts-generator plugin to create fonts in any format. It also generates CSS files so that you can use your icons directly in your HTML, using CSS classes.


npm install webfonts-loader


An example of usage can be found in the test/ directory of this repository.

Webpack rule

Add this rule to your Webpack config:

  test: /\.font\.js/,
  loader: ExtractTextPlugin.extract({
    use: [

So that each font configuration file will be loaded using this rule.

Loader options

You can provide options objects to configure the loader behaviour:

  test: /\.font\.js/,
  loader: ExtractTextPlugin.extract({
    use: [
        loader: 'webfonts-loader',
        options: { ... }

Available options are:

publicPath, String

This is the URL prefix for generated links (e.g. /static/ or https://cdn.project.net/). Should typically match Webpack's config.output.publicPath.

Any font config option

If you pass types, fileName or any other font config option, it will be used as a default (unless overriden in font config file).

The font configuration file


The config file allows you to specify parameters for the loader to use. Here is an example configuration file:

// myfont.font.js
module.exports = {
  'files': [
  'fontName': 'myfonticons',
  'classPrefix': 'myfonticon-',
  'baseSelector': '.myfonticon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fileName': 'app.[fontname].[hash].[ext]'

Then you have to require the configuration file:

// entry.js

The loader will then generate:

  • CSS with the base and class prefix
  • Font files for the SVG icons

All font configuration options

baseSelector, String

The base CSS selector, under which each icon class is to be created. See webfonts-generator#templateoptions

classPrefix, String

The prefix to be used with each icon class. See webfonts-generator#templateoptions

cssTemplate, String

See webfonts-generator#csstemplate

embed, Boolean

If true the font is encoded in base64 and embedded inside the @font-face declaration, otherwise font files are written to disk. Default: false

hashLength, Number

Optional. The length of hash in fileName. Min: 8 Max: 32 Default: 20

fileName, String

The generated font file names. These elements can be used:

  • [fontname]: the value of the fontName parameter
  • [ext]: the extension of the font file being generated (eot, ...)
  • [hash]: the hash of the current compilation
  • [chunkhash]: the hash of the SVG files

This option can be also configured globally in the webpack loader options.

files, Array

See webfonts-generator#files

fontName, String

See webfonts-generator#fontname

formatOptions, Object

See webfonts-generator#formatoptions

rename, Function

See webfonts-generator#rename

types, Array

See webfonts-generator#types


npm i @tfoxy/webfonts-loader

DownloadsWeekly Downloads






Unpacked Size

94.1 MB

Total Files


Last publish


  • tfoxy