fontdue-js

This package exports Fontdue.js components for React projects.

Requirements

react >= 18
node >= 16

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

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

Installation

npm install fontdue-js@latest

Usage

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.
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.
Render the StoreModal component so that is it available on every page.
Import the fontdue-js/fontdue.css CSS file. (This example uses Next.js)

Example

# .env.local
NEXT_PUBLIC_FONTDUE_URL=https://example.fontdue.com

// 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,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <FontdueProvider>
          {children}

          <StoreModal />
        </FontdueProvider>
      </body>
    </html>
  );
}

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

IDs

⚠️ 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.

Components

`FontdueProvider`

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 `https://your-site.fontdue.com`.
`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.

`StoreModal`

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';

`BuyButton`

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}`)

`CartButton`

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"

`CharacterViewer`

An interactive character/glyph explorer.

import CharacterViewer from 'fontdue-js/CharacterViewer';

Prop	Description
`collectionId` or `collectionSlug`	(Required) `string` Identifier for collection

`CustomerLoginForm`

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"

`TypeTesters`

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 }]`

`TestFontsForm`

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

`NewsletterSignup`

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.

`useFontStyle`

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>;
};

fontdue-js

fontdue-js

Requirements

Installation

Usage

Example

IDs

Components

`FontdueProvider`

`StoreModal`

`BuyButton`

`CartButton`

`CharacterViewer`

`CustomerLoginForm`

`TypeTesters`

`TypeTester` (standalone)

`TestFontsForm`

`NewsletterSignup`

`useFontStyle`

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

fontdue-js

fontdue-js

Requirements

Installation

Usage

Example

IDs

Components

FontdueProvider

StoreModal

BuyButton

CartButton

CharacterViewer

CustomerLoginForm

TypeTesters

TypeTester (standalone)

TestFontsForm

NewsletterSignup

useFontStyle

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`FontdueProvider`

`StoreModal`

`BuyButton`

`CartButton`

`CharacterViewer`

`CustomerLoginForm`

`TypeTesters`

`TypeTester` (standalone)

`TestFontsForm`

`NewsletterSignup`

`useFontStyle`

Weekly Downloads