Font loading

Add an actual licensed font file at public/fonts/inter-variable.woff2; this file does not come with the scaffold. Render Font from a root layout head export. Merge this head content and preserve any existing layout shell and metadata. The component creates the preload and @font-face rules for SSR and CSR, while a CSS variable makes the family available to the theme or application styles.

tsximport { Font, type Child } from "@tavojs/core";

export const head = (
  <Font
    src="/fonts/inter-variable.woff2"
    family="Inter"
    type="font/woff2"
    display="swap"
    weight="100 900"
    variable="--font-sans"
    fallback="system-ui, sans-serif"
  />
);

export default function RootLayout({ children }: { children?: Child }) {
  return <>{children}</>;
}

Loading a font and declaring --font-sans do not select it for text. Add a font-family rule to your existing global stylesheet. For UI components with their own typography token, also connect the family through the UI theme configuration.

cssbody {
  font-family: var(--font-sans, system-ui, sans-serif);
}

button, input, select, textarea {
  font: inherit;
}

font-display controls whether text waits for the custom file. swap keeps content visible immediately, while optional lets the browser retain the fallback on slow connections. Choose a fallback family with similar metrics to reduce movement when the custom font appears.

Font can emit stylesheet and preconnect links for an external provider. That request exposes the visitor's network metadata to another origin and adds a runtime dependency, so confirm the privacy and availability tradeoff before using it.

• Preconnect only to origins used by the selected stylesheet.

• Keep integrity and CSP requirements aligned with the provider.

• Prefer self-hosting when privacy, reliability, or offline behavior matters.