Fontdue
Showcase Services About Docs
Log in Try now →
Fontdue
  • Showcase
  • Services
  • About
  • Docs
Log in Start free trial

Overview

What is Fontdue? First steps Integrate Fontdue Launch your site

Platform guide

Run your foundry
Fonts
Managing your font catalog Bundles Hidden collections Variable fonts Color fonts Webfonts Test fonts Type tester editor Character groups
Licensing
Font licenses Order variables
Pricing
Payments & tax
Payments with Stripe Cart & checkout Receipts & invoices Tax Currencies
Orders & customers
Orders Quotes and shared carts Customers Coupons Watermark lookup Newsletters
Analytics & reports
Dashboard Website analytics Reports Cookie consent
Storefront
Integration Branding Domains Test mode
Content
Font collection content Designers Pages Articles

Website guide

Add to your site

Developer guide

Build your site
Set up the project Add the provider Use components Lazy versus preloaded Query the GraphQL API Build font pages Revalidate data Admin preview Deploy
GraphQL API
GraphQL Playground
How-to guides
Set up GraphQL codegen Share GraphQL fragments across queries Write your own @font-face CSS Customize Stripe elements Gate third-party scripts on consent Use a headless CMS Render components in your content Migrate from v2

Reference

Components
Store Modal Buy Button Cart Button Type Testers Type Tester (standalone) Character Viewer Customer Login Form Test Fonts Form Newsletter Signup Node Password Form
Glossary Settings Configuration Hooks Troubleshoot common issues Webfont CSS The demo template Theme properties Purchasing power parity

Changelog

What's new

Overview

What is Fontdue? First steps Integrate Fontdue Launch your site

Platform guide

Run your foundry
Fonts
Managing your font catalog Bundles Hidden collections Variable fonts Color fonts Webfonts Test fonts Type tester editor Character groups
Licensing
Font licenses Order variables
Pricing
Payments & tax
Payments with Stripe Cart & checkout Receipts & invoices Tax Currencies
Orders & customers
Orders Quotes and shared carts Customers Coupons Watermark lookup Newsletters
Analytics & reports
Dashboard Website analytics Reports Cookie consent
Storefront
Integration Branding Domains Test mode
Content
Font collection content Designers Pages Articles

Website guide

Add to your site

Developer guide

Build your site
Set up the project Add the provider Use components Lazy versus preloaded Query the GraphQL API Build font pages Revalidate data Admin preview Deploy
GraphQL API
GraphQL Playground
How-to guides
Set up GraphQL codegen Share GraphQL fragments across queries Write your own @font-face CSS Customize Stripe elements Gate third-party scripts on consent Use a headless CMS Render components in your content Migrate from v2

Reference

Components
Store Modal Buy Button Cart Button Type Testers Type Tester (standalone) Character Viewer Customer Login Form Test Fonts Form Newsletter Signup Node Password Form
Glossary Settings Configuration Hooks Troubleshoot common issues Webfont CSS The demo template Theme properties Purchasing power parity

Changelog

What's new

How-to guides

Self-contained recipes for the advanced detours – GraphQL codegen, sharing fragments, your own webfont CSS, Stripe Elements styling, consent-gated analytics, a headless CMS, and rendering components embedded in your content.

Recipes for specific situations that come up once your site is running – narrower than the walkthrough, each one self-contained. The first three extend steps of the walkthrough; the rest cover situations that surface as a site matures, including upgrading an existing v2 site to v3.

→ Set up GraphQL codegen

Generate TypeScript types from your queries so data flows typed into your components.

→ Share GraphQL fragments across queries

Define a fragment once and reuse it across query files with #import.

→ Write your own @font-face CSS

Preload and serve your Fontdue-hosted fonts as page webfonts.

→ Customize Stripe elements

Style the Stripe Address Element to match your site’s design.

→ Gate third-party scripts on consent

Block analytics scripts until the visitor accepts cookies.

→ Use a headless CMS

Compose Fontdue’s GraphQL API with a separate CMS like Sanity for richer editorial workflows.

→ Render components in your content

Render Fontdue components that editors embed as HTML in collection descriptions and content pages.

→ Migrate from v2

Upgrade an existing Next.js site from fontdue-js v2 to the framework-agnostic v3.

← Previous GraphQL Playground Next → Set up GraphQL codegen

Re-establishing connection...

Product
Showcase Services
Documentation
Platform guide Website guide Developer guide Reference Changelog
Company
About Contact
Legal
Terms Privacy Customer data
© 2026 Fontdue, Inc.
Fontdue