Webfonts

AssetPack provides a couple of plugins generating woff2/sdf/msdf fonts from ttf, otf, woff, and svg files.

Webfont

This plugin generates woff2 fonts from ttf, otf, woff, and svg files.

Example

Original

import { webfont } from "@assetpack/core/webfont";

export default {
  ...
  pipes: [
    ...
    webfont(),
  ],
};

Tags

Tag	Folder/File	Description
wf	both	If present the file(s) will be converted to a webfont (woff2).
family	file	The font family name.

---

SDF + MSDF

These plugins generate signed distance field (SDF) and multi-channel signed distance field (MSDF) fonts from ttf files.

Example

Original

import { sdf, msdf } from "@assetpack/core/webfont";

export default {
  ...
  pipes: [
    ...
    sdf(),
    msdf(),
  ],
};

API

Option	Type	Description
font	object	An object containing options to customise the font generation. See below for available options.
font.outputType	'xml' | 'json'	Type of output font file. Can be xml for a BMFont standard .fnt file. Defaults to 'xml' | 'json'
font.charset	string | string[]	The characters to include in the bitmap font.
font.fontSize	number	The font size at which to generate the distance field. Defaults to 42
font.textureSize	[number, number]	The dimensions of an output texture sheet, normally power-of-2 for GPU usage. Defaults to [512, 512]
font.texturePadding	number	Pixels between each glyph in the texture. Defaults to 2
font.border	number	Space between glyph textures and edge. Defaults to 0
font.fieldType	'msdf' | 'sdf' | 'psdf'	What kind of distance field to generate. Can be msdf, sdf, or psdf. Defaults to 'msdf'
font.distanceRange	number	The width of the range around the shape between the minimum and maximum representable signed distance. Defaults to 3
font.roundDecimal	number	Rounded digits of the output font metrics. For xml output, roundDecimal: 0 recommended.
font.vector	boolean	Output an SVG Vector file for debugging. Defaults to false
font['smart-size']	boolean	Shrink atlas to the smallest possible square. Defaults to false
font.pot	boolean	Output atlas size shall be power of 2. Defaults to false
font.square	boolean	Output atlas size shall be square. Defaults to `false
font.rot	boolean	Allow 90-degree rotation while packing. Defaults to false
font.rtl	boolean	Use RTL (Arabic/Persian) characters fix. Defaults to false

Tags

Tag	Folder/File	Description
sdf	both	If present the file(s) will be converted to a SDF font.
msdf	both	If present the file(s) will be converted to a MSDF font.
family	file	The font family name.