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#
import { subsetFonts } from "@shadow-js/dusk/vite";
Signature#
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#
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" });