DefineFontsOptions
Options of defineFonts.
Options of defineFonts.
Import#
ts
import type { DefineFontsOptions } from "@shadow-js/dusk/vite";
Signature#
ts
interface DefineFontsOptions extends GoogleFontsOptions {
/** Absolute path of the app's `public/` directory: the files are read from here (and Google's are vendored here). */
readonly publicDir: string;
/** URL prefix the files are served under. Default `/` (so `fonts/x.woff2` is `/fonts/x.woff2`). */
readonly urlPrefix?: string;
/**
* The element the CSS variables are set on: `":root"` (default), `"html"`, `"body"`, or a class (`".font-vars"`).
* Next.js sets them on the `<body>` through the variable classes; a class is the same, under the app's control.
*/
readonly variableTarget?: ":root" | "html" | "body" | `.${string}`;
/**
* The CDN origin the font files are served from (`https://cdn.example`; the same value as the `assetOrigin` of
* `dusk()` when you upload `public/` there). The file URLs, the `@font-face` sources and the preload links then name
* it, and `preconnects` has a link that opens the connection early. Absent: the files are served from the app's origin
* and there is nothing to preconnect to. `dusk()`'s own `assetOrigin` does not move files in `public/`, so set this
* only when the font files really are on that origin.
*/
readonly assetOrigin?: string;
/**
* Fonts to preload on some routes only, for the fonts that should not load on every page: a route glob (`/`, `/blog/**`)
* to the keys of the families whose files that route preloads (the files that are not turned off with
* `preload: false`). `FontsOutput.routePreloads` has the tags and `fontPreloadsFor` picks them for a path. Pair it with
* `preload: false` on the family, so `preloads` (every page) does not carry them.
*/
readonly routes?: Readonly<Record<string, readonly string[]>>;
/**
* Print the font report (see `FontsOutput.report`): `true` writes it to the console, a function receives the text. Default:
* no output; the report is always in the result.
*/
readonly report?: boolean | ((text: string) => void);
}
Members#
| Name | Type | Description |
|---|---|---|
publicDir |
readonly publicDir: string |
Absolute path of the app's public/ directory: the files are read from here (and Google's are vendored here). |
urlPrefix? |
readonly urlPrefix?: string |
URL prefix the files are served under. Default / (so fonts/x.woff2 is /fonts/x.woff2). |
variableTarget? |
readonly variableTarget?: ":root" | "html" | "body" | `.${string}` |
The element the CSS variables are set on: ":root" (default), "html", "body", or a class (".font-vars"). Next.js sets them on the <body> through the variable classes; a class is the same, under the app's control. |
assetOrigin? |
readonly assetOrigin?: string |
The CDN origin the font files are served from (https://cdn.example; the same value as the assetOrigin of dusk() when you upload public/ there). The file URLs, the @font-face sources and the preload links then name it, and preconnects has a link that opens the connection early. Absent: the files are served from the app's origin and there is nothing to preconnect to. dusk()'s own assetOrigin does not move files in public/, so set this only when the font files really are on that origin. |
routes? |
readonly routes?: Readonly<Record<string, readonly string[]>> |
Fonts to preload on some routes only, for the fonts that should not load on every page: a route glob (/, /blog/**) to the keys of the families whose files that route preloads (the files that are not turned off with preload: false). FontsOutput.routePreloads has the tags and fontPreloadsFor picks them for a path. Pair it with preload: false on the family, so preloads (every page) does not carry them. |
report? |
readonly report?: boolean | ((text: string) => void) |
Print the font report (see FontsOutput.report): true writes it to the console, a function receives the text. Default: no output; the report is always in the result. |