Reference

Guides

Information

Updates

© Fontdue, 2022

Fontdue.js

Add this snippet to your site's HTML head. Replace https://your-site.fontdue.com with your Fontdue site URL.

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="module">
  import fontdue from "https://js.fontdue.com/fontdue.esm.js";
  
  fontdue.initialize({
    url: "https://your-site.fontdue.com",
    config: {
      typeTester: {      
        size: {
          min: 6,
          max: 480,
          label: 'Size',
        },
        selectable: true,
        textInput: false,
        groupEdit: false,
        initialMode: 'local',
        shy: true,
        buyButton: true,
        selectButtonLabel: 'Buy',
        selectButtonStyle: 'outlined',
      },
    },
  });
</script>

Make sure you have allowed Cross-origin API access for your domain.

Read on for all the available config options, the range of different components you can add to your pages, and the optional element attribute API.

React

Fontdue.js React components are available via NPM.

If you are using React to build your site, we recommend using these React components.

npm install fontdue-js

Read the docs →

Config

These options below describe all the available config options in the fontdue.initialize() script.

Type Tester config

Type Tester OpenType features config

OpenType features column config

Slider config

Form config

Store Modal config

Components

Store Modal

The Store Modal component is a self-contained shopping experience containing a directory of fonts to browse, and integrates the cart and checkout.

Ensure this tag is present on every page, by putting it in your site's layout template (it could go right above the snippet above). You can add it right before the snippet above.

<fontdue-store-modal></fontdue-store-modal>

Buy Button

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

Renders a button with the text Buy {{collection-name}}

<fontdue-buy-button 
  collection-id="{{id}}"
  collection-name="Example"
></fontdue-buy-button>

Cart Button

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.

<fontdue-cart-button button-style="icon">
</fontdue-cart-button>

<fontdue-cart-button label="Shop">
</fontdue-cart-button>

Character Viewer

An interactive character/glyph explorer.

<fontdue-character-viewer collection-id="{{my-id}}">
</fontdue-character-viewer>

Customer Login Form

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.

<fontdue-customer-login-form>
</fontdue-customer-login-form>

Type Testers

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

<fontdue-type-testers 
  collection-id="{{my-id}}"
  default-mode="local"
  autofit="true">
</fontdue-type-testers>

Type Tester (standalone)

A single instance of the type tester where you enter the content as widget attributes, rather than managing the content in the Fontdue admin.

<fontdue-type-tester
  family-name="My Font Family"
  style-name="Bold"
  font-size="96"
  line-height="1.5"
  content="The quick brown fox.."
  features="onum,tnum,frac,smcp,c2sc,ss01,ss02"
  autofit="true"
></fontdue-type-tester>

Test Fonts Form

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

<fontdue-test-fonts-form>
</fontdue-test-fonts-form>

Newsletter Signup

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

<fontdue-newsletter-signup opt-in-label="I agree to receive direct email marketing" opt-in-checkbox-checked>
</fontdue-newsletter-signup>

Node Password Form

Font Collections with passwords are not accessible until a user enters the password using this form. This form will be hidden if the user has already accessed the collection, and it will automatically refresh the page upon success. So, to set up a basic password access for a collection, you can place this form next to a buy button (for example). In the example below, only the form is visible until the password is entered, and then only the buy button is visible.

To “undo” the password access, you need to clear your cookies (_fontdue_session).

<fontdue-node-password-form collection-slug="example"></fontdue-node-password-form>
<fontdue-buy-button collection-slug="example"></fontdue-buy-button>

Element attribute API

If you prefer to use your own elements, you can add Fontdue interactivity to them by adding custom fontdue-* attributes. They will become interactive after the Fontdue.js scripts are loaded.

Example: Cart Button

Create your own cart button that opens the Store Modal by adding the fontdue-click="open-store-modal" attribute. The example below includes the optional fontdue-store-route attribute which always opens to the Cart page, even if it’s empty.

<button 
  type="button" 
  fontdue-click="open-store-modal" 
  fontdue-store-route="cart">
  Cart
</button>

Example: Buy Button

Create a buy button which opens the modal at a particular product page:

<button 
  type="button" 
  fontdue-click="open-store-modal" 
  fontdue-store-route="product/{{ collection_id }}">
  Buy
</button>

The Collection ID can be found in the Fontdue admin panel, on the Font collection’s Widget codes tab, or through the GraphQL API.

Extend this functionality to select a particular product with the fontdue-store-select attribute:

<button 
  type="button" 
  fontdue-click="open-store-modal" 
  fontdue-store-route="product/{{ collection_id }}"
  fontdue-store-select="{{ sku_id }}">
  Buy
</button>

You can find SKU IDs in the Fontdue admin panel. A SKU can be attached to various products including Collections, Bundles and Font styles. For collections, find it on the Widget codes tab. For individual font styles as well as bundles, find it under the Price field. A product must have a price to get a SKU ID and be selectable.

• Fontdue.js
• React
• Config
• Type Tester config
• Type Tester OpenType features config
• OpenType features column config
• Slider config
• Form config
• Store Modal config
• Components
• Store Modal
• Buy Button
• Cart Button
• Character Viewer
• Customer Login Form
• Type Testers
• Type Tester (standalone)
• Test Fonts Form
• Newsletter Signup
• Node Password Form
• Element attribute API
• Example: Cart Button
• Example: Buy Button