Log in Start free trial →
Reference
Fontdue.js
GraphQL
Demo template
Guides
Webflow
Wordpress + Lay Theme
Wordpress + Semplice
Next.js
Python + Flask
Information
What’s new
Full-service website development
Managing your font catalog
Variable fonts
Font licenses
Webfonts
Cross-origin access
Payments with Stripe
Sales taxes
VAT
Test fonts
Test mode
Manage your Fontdue subscription
Launching your site
Updates
Update 001
Update 002
Update 003
© Fontdue, 2022
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.
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@1Config
| 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 |
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>