Fontdue documentation
Fontdue documentation
📓

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 the bottom of your site's HTML body. Replace https://your-site.fontdue.com with your Fontdue site URL.

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="text/javascript" src="https://js.fontdue.com/fontdue.js"></script>
<script>
  fontdue.initialize({
    url: "https://your-site.fontdue.com",
    config: {
      typeTester: {      
        min: 6,
        max: 480,
        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

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.
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)
autofit
string
See the autofit option for fontdue-type-testers widget above.

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.