Log in Start free trial →
Reference
Guides
Information
Updates
© Fontdue, 2022
Fontdue.js
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
Config
These options below describe all the available config options in the fontdue.initialize()
script.
Property | Type | Description |
---|---|---|
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
Property | Type | Description |
---|---|---|
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
Property | Type | Description |
---|---|---|
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
Property | Type | Description |
---|---|---|
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
Property | Type | Description |
---|---|---|
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
Property | Type | Description |
---|---|---|
checkboxStyle | 'check' | 'cross' | Icon style for checkboxes across components. Defaults to 'check' |
Store Modal config
Property | Type | Description |
---|---|---|
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>
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>
Property | Type | Description |
---|---|---|
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>
Property | Type | Description |
---|---|---|
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>
Property | Type | Description |
---|---|---|
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>
Property | Type | Description |
---|---|---|
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>
Property | Type | Description |
---|---|---|
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>
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>
<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.
- 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
- Element attribute API
- Example: Cart Button
- Example: Buy Button