This is the hands-on path through building against the API: a single walkthrough that installs fontdue-js, points it at your store, and explains the handful of files that turn your catalog into a working site. Pick your framework from the switcher above – the choice carries through the rest of the walkthrough – and follow the pages in order.
Each page explains part of the reference template for your framework. Clone it first and read along; the code there is the source of truth, and each page below takes apart the part that matters.
Next.js: fontdue/example-next.
Astro: fontdue/example-astro.
React Router 7: fontdue/example-react-router.
TanStack Start: fontdue/example-tanstack.
The walkthrough is deliberately the happy path. It gets you to a data-driven site – a home page, a detail page per typeface, a cart and checkout – without the advanced detours. Those live in the how-to guides: preloading your own webfont CSS, wiring up GraphQL codegen from scratch, styling Stripe Elements, and the rest. The pages here link out to them at the point each one becomes relevant.
Alongside the walkthrough, The GraphQL API and the GraphQL Playground document the read interface the whole site fetches from. Already running an earlier version of fontdue-js? v2 was Next.js-only, and Migrate from v2 is the upgrade path to the framework-agnostic v3.
Install the toolkit, wire up your build, point it at your site, and run it locally.
Add the providerMount FontdueProvider and the Store Modal once, so every component can reach your store.
Use componentsHow Fontdue’s interactive components drop into your pages.
Lazy versus preloadedWhen each component’s data is fetched – in the browser as it loads, or ready before the first paint.
Query the GraphQL APIFetch your catalog on the server and render it with typed data.
Build font pagesOne dynamic route that renders a detail page per collection from that data.
Revalidate dataRefresh the site when content changes in the admin.
Admin previewReveal hidden and unpublished fonts on the live site while you’re signed in as an admin.
DeployPut the site live on Netlify – production environment variables, the cross-origin allowlist, and the deploy hook.