📖

Fontdue.js

Interactive components that can be added to any site

💡

If you're building your site from scratch, we recommend starting with one of our Guides

Add this snippet to the bottom of your site's HTML body. Replace 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,
      },
    },
  });
</script>

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

Configuration options

PropertyTypeDescription...
url
String
Your Fontdue endpoint URL
config.typeTester.min
Number
Min font size
config.typeTester.max
Number
Max font size
config.typeTester.selectable
Boolean
Makes the font family and style selectable with a dropdown
config.typeTester.textInput
Boolean
Enables the input to control the font size value in pixels
config.typeTester.groupEdit
Boolean
Whether to enable or disable the group edit toggle (Affect all styles)
config.typeTester.initialMode
'local' or '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
config.typeTester.shy
Boolean
Controls are hidden until the user hovers or focuses the type tester component
config.typeTester.buyButton
Boolean
Enables the buy button
config.typeTester.selectButtonLabel
String
The select button label (default 'Select')
config.typeTester.selectButtonStyle
'inline' or 'outlined'
Choose from the button styles

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>

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>

button-style

Optional. Supports "inline" or "icon". If left blank, the button is unstyled.

label

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

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>

collection-id

The collection ID queried from GraphQL

collection-slug

Alternative to collection-id

collection-name

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

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>

collection-id

The collection ID queried from GraphQL

collection-slug

Alternative to collection-id

default-mode

Either local or 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

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

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>

family-name (required)

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

style-name (required)

The name of the style from the family to display.

font-size

Initial font size in pixels.

line-height

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

content

The initial content to display.

features

Comma-separated list of opentype features to expose as options to users.

autofit

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

Test Fonts Form

A form for downloading your site's test fonts. The user's name and email will be recorded with the time they downloaded the test fonts. Users must agree to the EULA and can opt-in to newsletters. You may customize those labels in the Fontdue dashboard under SettingsLabels.

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

agreement-label - Replaces the default EULA agreement text

Newsletter Signup

A simple form for users to sign up for your newsletter. This simply creates Customer records in the database.

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