font-subset-loader2

1.1.7 verified Sat Apr 25 auth: no javascript

A webpack loader for subsetting TTF font files to include only specified glyphs, reducing file size. Compatible with webpack 4 and 5, it forked the unmaintained font-subset-loader to update dependencies and fix compatibility. Stable version 1.1.7, with infrequent releases. Alternatives like fontmin-webpack or glyphhanger offer more features, but this loader integrates natively with webpack load chain, processing fonts as resources before file/url-loader.

Common errors

error Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing font-subset-loader2 rule for .ttf files or incorrect loader order.

fix

Ensure webpack config includes { test: /\.ttf$/, use: ['font-subset-loader2'] } and that it is the first loader in the 'use' array.

Warnings

gotcha Glyphs containing special characters must be passed via options object, not query string, to avoid webpack parsing issues. ↓

fix Use 'options: { glyphs: '...' }' instead of inline query string.

breaking This package is incompatible with webpack <4. It requires webpack 4+ and does not work with webpack 3 or earlier. ↓

fix Upgrade to webpack 4 or 5.

gotcha The loader only works with TTF fonts. Other font formats (OTF, WOFF, etc.) are not supported. ↓

fix Convert fonts to TTF before using this loader.

Install

npm install font-subset-loader2

yarn add font-subset-loader2

pnpm add font-subset-loader2

Imports

default

wrong

const fontSubsetLoader = require('font-subset-loader2')

correct

import fontSubsetLoader from 'font-subset-loader2'

Loader is used via webpack config, not imported in code.

Quickstart

Webpack config to subset TTF font to include only specified glyphs.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ttf$/,
        use: [
          {
            loader: 'font-subset-loader2',
            options: {
              glyphs: 'hello, world!'
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};