📓

Fontdue.js

Log in Start free trial →

Fontdue.js

💡
If you're just getting started, check out our guides on your left.

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.

Configuration options

PropertyTypeDescription
url

string

Your Fontdue site URL

typeTester

object

See Type Tester config below

form

object

See Form config below

storeModal

object

See Store Modal config below

Type Tester config

Type tester config

PropertyTypeDescription
selectable

boolean

Makes the font family and style selectable with a dropdown

textInput

boolean

Enables the input to control the font size value in pixels

groupEdit

boolean

Whether to enable or disable the group edit toggle (Affect all styles)

initialMode

'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

shy

'hover' | 'focus' | true | false

Controls are hidden until the user hovers or focuses the type tester component. 'focus' means the controls are hidden until the user focuses (clicks the text to edit it). true is equivalent to 'hover'. Defaults to false

buyButton

boolean

(Renamed to selectButton)

selectButton

boolean

Enables the Select button. Clicking this button opens the StoreModal with the relevant font style selected

selectButtonLabel

string

The select button label (defaults to 'Select')

selectButtonStyle

'inline' | 'outlined'

Choose from the button styles

toolsPosition

'inline' | 'floating'

Controls display of the toolbar. 'inline' means the each type tester has its own toolbar. 'floating' is a single toolbar fixed to the bottom of the viewport that controls the currently focused tester. Note that shy must be set to 'focus' for the floating style. Defaults to 'inline'

truncate

boolean

Set to true to truncate longer text to a single line. When users click to edit the text, that tester will display all of the content. Defaults to false. Note you may need to increase the “Line height” value to prevent text being chopped off

bulletStyle

'square' | 'round'

Choose bullet styles, e.g. in the OpenType features panel. Defaults to square

autofitOnChange

boolean

For type testers with autofit set to true, this controls behavior when the user edits text. If set to true, the type tester will continue autofitting the new content

openTypeFeatures

object

See Type Tester OpenType features config below

variableAxesPosition

'auto' | 'features-panel' | 'inline' | 'above’

Controls where variable axes appear. features-panel puts the axes inside the “OT Features” panel. inline puts them inline next to the Size sliders, and above adds the sliders above the regular toolbar and always visible. auto becomes features-panel if there are more than one axis, and inline if there is only one axis. Defaults to auto

alignmentButtons

boolean

Set to true to enable text alignment buttons

initialAlignment

'left' | 'center' | 'right'

Defaults to left

min

number (deprecated, see size)

Min font size

max

number (deprecated, see size)

Max font size

size

object

Controls for the Size slider. See Slider config below. Defaults to { min: 10, max: 200, label: 'Size' }

lineHeight

object

Controls for the Line height slider. See Slider config below. Defaults to undefined. Set this value to {} for the default values: { min: 0.7, max: 2, label: 'Line height' }

Type Tester OpenType features config

Type Tester OpenType Features Config

PropertyTypeDescription
interactionStyle

'panel' | 'select'

Adjusts the user experience for selecting OT features. In the default panel experience, a button reveals a panel with 4 columns of features (can be customized with the columns config). The select experience is a select box which allows the user to select only one OT feature at a time.

columns

object[]

Control how the list of OpenType features appear in columns. See OpenType features column config below. If left empty, features will appear in the order set in the Type Testers section of the CMS, automatically organized into 4 columns

selectionStyle

'bullet' | 'checkbox'

Selection style for features in the panel experience. Defaults to bullet

buttonLabel

string

Label for the button, defaults to "OT Features”

OpenType features column config

Column config

PropertyTypeDescription
features

({ code: string; name: string } | string)[]

List of features to display for a particular column. You may specify only the feature code (e.g. onum) in which case the display name is automatically inferred (”Oldstyle Numerals”), or you may specify your own name for features: { code: 'onum', name: 'Oldstyle numbers' }

range

number

Number of columns for this column config to span, for example you may have a variable number of stylistic set features you want to spread across 2 columns. Defaults to 1

Slider config

Slider config

PropertyTypeDescription
min

number

Minimum size for the slider

max

number

Maximum size for the slider

label

string | false

Label for the slider. Set to false to disable.

Form config

Form config

PropertyTypeDescription
checkboxStyle

'check' | 'cross'

Icon style for checkboxes across components. Defaults to 'check'

Store Modal config

Store Modal config

PropertyTypeDescription
indexLayout

'styled-aa' | 'styled-font-names'

Alternate layouts for the Store Modal’s initial “browse” index page. Defaults to 'styled-aa'

productLicensesPosition

'bottom' | 'top'

On the product pages, controls the position of licenses selection, above or below the product selection. Defaults to 'bottom'

indexExcludeTags

string[]

You may exclude some font collections from the store index page by specifying tags to exclude, e.g. ["free"]

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>

Buy button props

PropertyTypeDescription
collection-id or collection-slug

string Required

Identifier for collection

label

string

Label for the button (defaults to ‘Buy {collectionName}’)

collection-name

string

The name to render in the button: Buy {{collection-name}}

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>

Cart button options

PropertyTypeDescription
button-style

'inline' | 'icon'

Button style. If left blank, the button is unstyled.

label

string

For non-icon style buttons, the text to render inside the button. Defaults to "Cart"

Character Viewer

An interactive character/glyph explorer.

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

Character viewer props

PropertyTypeDescription
collection-id or collection-slug

string Required

Identifier for collection

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>

CustomerLoginForm props

PropertyTypeDescription
submit-label

string

Label for the submit button, defaults to "Submit”

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 testers props

PropertyTypeDescription
collection-id or collection-slug

string Required

Identifier for collection

default-mode

'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

'true'

Set to true to make the sentence 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

string

Comma-separated list of tags. Will render only type testers that include these tags

exclude-tags

string

Commas-separate list of tags to exclude. Will exclude type testers that include these tags

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>

Type tester standalone props

PropertyTypeDescription
family-name

string Required

Font family name (must have been already uploaded to your Fontdue admin)

style-name

string Required

The name of the style from the family to display. Note that variable fonts have one or more Font Styles, these represent each font file that make up the designspace of the font.

font-size

string

Initial font size in pixels.

line-height

string

Line-height as a proportional value where 1 == font-size.

content

string

The initial content to display.

features

string

Comma-separated list of opentype feature codes to expose as options to users. (e.g. ss01,ss02,ss03)

features-selected

string

Comma-seperated list of opentype feature codes to be selected by default

autofit

string

See the autofit option for fontdue-type-testers widget above.

variable-settings

string

If this type tester points to a variable font, set the variable font settings here with a comma-separated list of settings. Each setting must have the format {axis} {value}, e.g. wdth 1000, ital 0.5. The instance dropdown will register a named instance if its coordinates match up with the settings supplied here.

axes

string

Comma-separated list of variable axes to expose (e.g. wdth,opsz)

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>

Test fonts form props

PropertyTypeDescription
download-label

string

Text for the download button. Defaults to “Download test fonts”

agreement-label

string

Replaces the default EULA agreement text

newsletter-checkbox-checked

boolean

Include this attribute to set the newsletter opt-in checkbox checked by default.

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>

Newsletter signup props

PropertyTypeDescription
button-label

string

Text for the button. Defaults to “Subscribe”

opt-in-label

string

Label that appears with the checkbox required to be checked.

opt-in-checkbox-checked

string

Include this attribute to set the checkbox checked by default.

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>
📖
Note: The <fontdue-cart-button> is aware of how many items are in the cart, and will prevent navigating to the modal’s cart page if there are no cart items, but this behavior isn’t implemented on the fontdue-store-route attribute.

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.