[]previous and next page

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.