Font loading

Place licensed font files under public and render Font from a root layout head export. 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"
    variable="--font-sans"
    fallback="system-ui, sans-serif"
  />
);

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

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.