font-subset-loader

font subset loader for webpack

Transforms a TTF font resource so that it contains only a specified subset of glyphs with all other glyphs stripped out.

Install

npm install font-subset-loader fontmin --save-dev

font-subset-loader requires fontmin as a peerDependency. Thus you are able to specify the required version accurately.

Usage

Webpack Documentation: Using loaders

Glyphs like ! or , conflict with webpack's query string syntax (i.e. 'font-subset?glyphs=hey,you!'). It is therefore recommended to instead use a query object for passing the glyphs to the loader as a property:

{
	test: /\.ttf$/,
	loader: 'font-subset',
	query: { glyphs: 'hey,you!' }
}
// returns the file content of the subsetted file.ttf
// that contains only the specified glyphs 'h', 'e', 'y', ',', 'o', 'u' and '!'

Usage with other loaders

Process subsetted .ttf files with file-loader:

loaders: [
	{
		test: /\.ttf$/,
		loader: 'file'
	},
	{
		test: /\.ttf$/,
		loader: 'font-subset',
		query: { glyphs: 'hey,you!' }
	}
]

Process subsetted .ttf files with url-loader:

loaders: [
	{
		test: /\.ttf$/,
		loader: 'url'
	},
	{
		test: /\.ttf$/,
		loader: 'font-subset',
		query: { glyphs: 'hey,you!' }
	}
]

License

MIT