Use components - Fontdue Docs

A Fontdue component is a React component you import from fontdue-js – a TypeTesters block, a BuyButton, the CharacterViewer, the cart. Each one is interactive and runs in the browser, and drops into a page with no wiring beyond the provider you mounted above it.

Placing a component

A component goes on the page with an identifier that points it at a font:

Render it inside a server component and pass the identifier – React Server Components fetch the data on the server, so it lands in the initial HTML. No "use client", no query of your own.

Render it with the identifier, and it fetches its own data in the browser once it loads.

Render it as an island with client:load, passing the shared config – islands don’t inherit the provider’s settings. It fetches its own data in the browser once it loads.

// src/app/page.tsx — a server component
import TypeTesters from "fontdue-js/TypeTesters";

export default function Home() {
  return (
    <main>
      <TypeTesters collectionSlug="example-serif" />
    </main>
  );
}

// app/routes/home.tsx
import TypeTesters from "fontdue-js/TypeTesters";

export default function Home() {
  return (
    <main>
      <TypeTesters collectionSlug="example-serif" />
    </main>
  );
}

// src/routes/index.tsx
import TypeTesters from "fontdue-js/TypeTesters";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  return <TypeTesters collectionSlug="example-serif" />;
}

---
// src/pages/index.astro
import TypeTesters from "fontdue-js/TypeTesters";
import { fontdueConfig } from "../lib/fontdue";
---

<TypeTesters client:load collectionSlug="example-serif" config={fontdueConfig} />

Identifying a collection

Components that show a specific font take one of two identifiers:

collectionSlug – the slug from the collection’s admin URL, under Settings. Readable and stable, and what a font page reads from its route to render a collection.
collectionId – the collection’s id from GraphQL. What you pass when you’ve already fetched a collection and have the id – for example rendering a list of collections.

Both are equally data-driven; which you use comes down to which identifier the page already has.¹¹The standalone Type Tester is the exception to the collection identifiers: it renders a single style, so it takes a familyName and styleName instead.

Components shared across the site

Two components don’t belong on individual pages. The Store Modal is the cart and checkout overlay, and goes in your layout once. The Cart Button reads the shared cart and can sit anywhere in your page (in the example it lives in the nav).

import CartButton from "fontdue-js/CartButton";

<CartButton buttonStyle="icon" />

The full component set

The same components are documented one at a time in the components reference, each with its props and both forms it ships in: the HTML custom element for a script-tag site, and the React import used here.²²Editors can also embed components directly in admin content as HTML – Render components in your content covers rendering those. The next page covers when each component’s data is fetched – and how to have it ready before the first paint instead of fetching it in the browser: lazy versus preloaded.

¹ The standalone Type Tester is the exception to the collection identifiers: it renders a single style, so it takes a familyName and styleName instead. ↩

² Editors can also embed components directly in admin content as HTML – Render components in your content covers rendering those. ↩