<GioFont>

A typed marker for a font family declared in gio.toml. It renders nothing: the server self-hosts and preloads the files listed in [[fonts]].

import { GioFont } from '@gio.js/react';

<GioFont family="Inter" weights={[400, 700]} />

Fonts in GioJS are configuration, not code. The Rust server reads [[fonts]] at startup, copies or downloads each .woff2 file, serves it from /_gio/fonts/, and adds a <link rel="preload"> per file and a generated @font-face stylesheet to the head of every page. <GioFont> lets a component say which family and weights it relies on, next to the CSS that uses them; it has no effect on what is served.

Reference

Returns

null. Nothing reads the props - not the React render, not the client bundle, not the Rust server: a family or weight missing from gio.toml is not an error, and the text falls back to the next font in your CSS stack.

The [[fonts]] entries

One entry per file - one weight and style of one family:

Examples

A family in two weights

[[fonts]]
family = "Inter"
url = "/public/fonts/inter-400-normal.woff2"

[[fonts]]
family = "Inter"
url = "/public/fonts/inter-700-normal.woff2"
weight = 700

import type { LayoutProps } from '@gio.js/core';
import { GioFont } from '@gio.js/react';
import './site.css';

export default function SiteLayout({ children }: LayoutProps) {
  return (
    <>
      <GioFont family="Inter" weights={[400, 700]} />
      {children}
    </>
  );
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

h1 {
  font-weight: 700;
}

Good to know

• Unlike Next.js's next/font, nothing is generated from the component: no class name, no CSS variable, no subsetting. Use the family name in CSS.
• Every @font-face rule uses font-display: swap, so text shows in a fallback font until the file arrives. This is fixed.
• [[fonts]] is applied by the Rust server. A static export declares its fonts with @font-face in an imported stylesheet instead (see Font Optimization).
• The served .woff2 files are cached as immutable. A local file gets a new, content-hashed URL when it changes; a remote one is downloaded only once, so give a changed remote font a new URL.

Related

• Font Optimization - local and remote fonts, caching, static export.
• [[fonts]] - the configuration reference.
• CSS - importing the stylesheets that use the fonts.

Version history