2.7.0 • Public • Published


This package exports Fontdue.js components for React projects.


  • react >= 18
  • node >= 16

If using TypeScript, update to >= 4.7 and change your tsconfig.json moduleResolution setting to node16:

  "compilerOptions": {
    "moduleResolution": "node16",


npm install fontdue-js@latest


  1. Wrap the root of your project with the FontdueProvider component. For example in a Next.js app, add it to your app/layout.tsx or pages/_app.tsx.
  2. If using Next.js, add an environment variable to your app NEXT_PUBLIC_FONTDUE_URL pointing to your Fontdue store URL. Otherwise, you can include the url prop on the FontdueProvider.
  3. Render the StoreModal component so that is it available on every page.
  4. Import the fontdue-js/fontdue.css CSS file. (This example uses Next.js)


# .env.local
// app/layout.tsx
import FontdueProvider from "fontdue-js/FontdueProvider";
import StoreModal from "fontdue-js/StoreModal";
import "fontdue-js/fontdue.css";

export default async function RootLayout({
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">

          <StoreModal />

For details on integrating into your Next.js app, read our Next.js guide


⚠️ Some components accept a collectionId prop. Note this is the id returned from the GraphQL API.

You may alternatively specify a collectionSlug for these components, which can be useful if you are not consuming the GraphQL API. However, we recommend using collectionId when possible.



The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example in our guide.

import FontdueProvider from 'fontdue-js/FontdueProvider';
Prop Description
url string Your Fontdue store URL, in the form
config object Config object. Refer to the Fontdue.js docs site for available config options.
components object Component view overrides. This API will likely change.


Renders the Fontdue cart + checkout experience as a modal. This appears when a user clicks on a BuyButton or the buy button within TypeTesters

import StoreModal from 'fontdue-js/StoreModal';


A button which when clicked opens the Cart to the relevant collection, and selects the collection.

Renders a button with the text Buy {collectionName}

import BuyButton from 'fontdue-js/BuyButton';
Prop Description
collectionId or collectionSlug (Required) string Collection identifier
collectionName (Optional) string The name to render in the button: Buy {collectionName}
label (Optional) string Label for the button (defaults to Buy {collectionName})


A button to open the Store Modal. If the user has items in their cart, the button will navigate straight to the Cart screen. Otherwise it opens the fonts index.

import CartButton from 'fontdue-js/CartButton';
Prop Description
buttonStyle (Optional) 'icon' | 'inline' Button style. If left blank, the button is unstyled.
label (Optional) string For non-icon style buttons, the text to render inside the button. Defaults to "Cart"


An interactive character/glyph explorer.

import CharacterViewer from 'fontdue-js/CharacterViewer';
Prop Description
collectionId or collectionSlug (Required) string Identifier for collection


A form for customers to log in and retrieve their order history. When they enter their email address, they receive a link to a Fontdue-hosted page to view orders.

import CustomerLoginForm from 'fontdue-js/CustomerLoginForm';
Prop Description
submitLabel string Label for the submit button, defaults to "Submit"


A group of type tester components for a collection. You must first add content for the collection's type testers through the Fontdue dashboard.

import TypeTesters from 'fontdue-js/TypeTesters';
Prop Description
collectionId or collectionSlug (Required) string Identifier for collection
defaultMode (Optional) 'local' | 'global' The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, global turns it on
autofit (Optional) boolean Set to true to make the sentences fit on one line. It will adjust to the width of the tester as the user changes their browser window. If the user changes the font size or edits content, autofitting is turned off for that tester
tags (Optional) string[] Will render only type testers that include any of these tags
excludeTags (Optional) string[] Will exclude type testers that include any of these tags
onFocus (Optional) () => void when any type tester is focused
onBlur (Optional) () => void when any type tester is blurred
onToolbarOpenClose (Optional) (open: boolean) => void Callback when toolbar is opened/closed

TypeTester (standalone)

Standalone version of the type tester, which does not query the Fontdue CMS for content. You supply the content instead. Does not support the "Affect all styles" feature of the TypeTesters component.

import TypeTester from 'fontdue-js/TypeTester';
Prop Description
familyName (Required) string Font family name (must have been already uploaded to your Fontdue admin)
styleName (Required) string The name of the style from the family to display.
fontSize (Optional) number Initial font size in pixels.
lineHeight (Optional) number Line-height as a proportional value where 1 == fontSize.
content (Optional) string The initial content to display.
direction (Optional) 'ltr' | 'rtl' Writing direction
alignment (Optional) 'left' | 'center' | 'right' Text alignment
features (Optional) string[] List of opentype feature codes to expose as options to users. (e.g. ['ss01', 'ss02'])
axes (Optional) string[] List of variable axes to expose. (e.g. ['wdth', 'ital']). You must provide the relevant variableSettings for each axis
autofit (Optional) See TypeTesters.autofit above
featureSettings (Optional) { feature: string, value: string }[] List of features already selected, the value should be "1" to mark the feature as selected. The shape of this data is consistent with the TypeTester.featureSettings field in the GraphQL API. e.g. [{ feature: 'ss01', value: '1' }]
variableSettings (Optional) { axis: string, value: number }[] List of variable settings selected, consistent with the TypeTester.variableSettings field. e.g. [{ axis: 'wdth', value: 600 }, { axis: 'ital', value: 0.5 }]


Displays a form for users to enter their information and download test fonts. Make sure you have configured Test Fonts for this to work.

import TestFontsForm from 'fontdue-js/TestFontsForm';
Prop Description
agreementLabel (Optional) string Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings
downloadLabel (Optional) string Download button label. Defaults to "Download test fonts"
newsletterCheckboxChecked (Optional) boolean Set the newsletter opt-in checkbox checked by default


A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.

import NewsletterSignup from 'fontdue-js/NewsletterSignup';
Prop Description
optInLabel (Required) string Label that appears with the checkbox required to be checked.
buttonLabel (Optional) string Label for the button. Defaults to "Subscribe"
optInCheckboxChecked (Optional) boolean Set the checkbox checked by default.


A hook to load and render a particular font style. The fallback/loading style is a series of dots rather than any fallback system font.

Note that you must first load the relevant CSS for the font family (ideally in the <head> of your page). You can find the CSS URL by querying the FontCollection.cssUrl field in the Graphql API for the relevant family, or find the HTML code in the Fontdue CMS, under the Webfonts tab of the family. (For superfamilies, you must get load the CSS for each subfamily).

import useFontStyle from 'fontdue-js/useFontStyle';

const FontStyle = ({ familyName, styleName }) => {
  const { style } = useFontStyle({
    fontFamily: `${familyName} ${styleName}`,
    fontWeight: '400',
    fontStyle: 'normal',

  return <span style={style}>The quick brown box</span>;




Package Sidebar


npm i fontdue-js

Weekly Downloads






Unpacked Size

3.16 MB

Total Files


Last publish


  • tomconroy