Integrating Fontdue is connecting a website to your store. Your catalog, licenses, and checkout live in Fontdue; integration is how a site browses that catalog and runs the cart, checkout, type testers, and the rest against your Fontdue backend – wherever the site itself is built. With First steps behind you, you already have one working integration: the demo template. This page lays out the rest, so you can decide how you actually want your site built.
The choice runs from no code to a full developer build, and it comes down to how much of your site you want to own versus how much you want Fontdue to handle.
Your options
The demo template – no code. Fontdue builds a working storefront from your catalog and serves it at your Fontdue URL, which you can point your own domain to. It’s already live from First steps, and it takes your logo, fonts, and theme colors automatically. The trade-off is customization is limited. Good for getting selling quickly or for a foundry that wants a simple site. See the demo template reference.
Add HTML components to your site – script tag. Paste a <script> snippet and drop in HTML custom elements like <fontdue-buy-button> and <fontdue-store-modal>. It works on anything that accepts custom HTML – Webflow, WordPress, Cargo, Framer, or hand-written HTML – so you design the site and Fontdue supplies the store. See Add to your site.
Build a custom site template – React & GraphQL. The developer path, whether you build it yourself or hand it to a developer. Start from one of our reference templates and adapt it to your design, or add fontdue-js to a project of your own. Either way you query your catalog from your own code and render every page from that data, with Fontdue’s components dropped into your server-rendered tree. This is the most control, and the path we recommend. See the developer guide.
Have us built your site. If you’d rather stay in type design get in touch about full-service website development by the Fontdue team.
The component library and the GraphQL API are the same across the integration paths, and you can combine them: a script-tag site can still query the GraphQL API.
Why we recommend building your own site
With plain HTML or a site builder, you build each typeface page by hand – create the page, drop in a type tester and a buy button, point them at collection-slug="example-serif", then repeat for the next family. Ten typefaces, ten pages. A site built against the API inverts that: you write the page once as a template and it renders whatever the catalog holds. One route serves Example Serif, next month’s release, and your fiftieth family alike – add a family in the admin and its page exists. The site takes its shape from your data, which is what lets it scale past a handful of families.
What scales is the GraphQL API, and it’s framework-neutral – anything that can query GraphQL can render your catalog this way. fontdue-js is the toolkit for React frameworks that renders Fontdue’s components inside your own server-rendered tree, so your whole site is one framework, prerendered.11fontdue-js runs on any server-rendering React framework. It can run purely client-side too, but the developer guide doesn’t cover that path – without server rendering you give up the SEO and fast first paint a catalog site wants.
We have reference templates for four frameworks – Next.js (the recommended default), Astro, React Router 7, and TanStack Start – and the build walkthrough guides you through each one.
It’s possible to build your site with a non-React framework like Nuxt, SvelteKit, Kirby, Jekyll, Flask, Pelican, Eleventy, or anything else that lets you query from external sources (i.e. Fontdue’s GraphQL API), but you’ll use the script tag integration for the components instead of fontdue-js – the only downside of this approach is losing the ability to preload.
Tell Fontdue which path you took
Whichever route you pick, set it on the Integration tab in Settings so the admin tailors itself to your setup – see Integration. When you’re ready to go from private preview to a public store, Launch your site walks the sequence.