[]previous and next page

subsetFonts

Cuts the local font files of some families into slices by Unicode range, and returns the families with the slices as their files.

Cuts the local font files of some families into slices by Unicode range, and returns the families with the slices as their files. The slices are WOFF2 files written under public/ (named from the file, the slice and a hash of its content), so defineFonts preloads, measures and serves them like any other local file; each carries its unicode-range, so a browser downloads only the slices a page needs. A slice the font has no glyph for (a Latin font has no Arabic) is left out. The finished slices are kept in a cache folder, keyed by the font's bytes and the slice, so an unchanged font is not cut again.

Import#

ts
import { subsetFonts } from "@shadow-js/dusk/vite";

Signature#

ts
async function subsetFonts(
  fonts: Readonly<Record<string, FontDefinition>>,
  options: SubsetFontsOptions,
): Promise<Record<string, FontDefinition>>

Parameters#

Name Description
fonts The families, as defineFonts takes them; each file is a font under public/.
options The public/ folder, the slices and where things go.

Returns#

The same families with the slices as files, in the order of the slices.

Throws#

  • TypeError for a slice name or range that is not valid, or a file path that leaves public/.
  • Error when a file is missing or cannot be cut, naming it, or when the cutting library is not installed.

Examples#

ts
import { defineFonts, subsetFonts } from "@shadow-js/dusk/vite";

const families = await subsetFonts(
  { sans: { family: "Inter", variable: "--font-sans", files: [{ file: "fonts/Inter.ttf", weight: "100 900" }] } },
  { publicDir: "public", subsets: ["latin", "latin-ext", "arabic"] },
);
export const fonts = defineFonts(families, { publicDir: "public" });