These options below describe all the available config options in the fontdue.initialize() script.
| Property |
Description |
Type |
typeTester |
See below |
object |
url |
Your Fontdue site URL |
string |
form |
See below |
object |
testFonts |
See below |
object |
storeModal |
See below |
object |
stripe |
See Stripe config below |
object |
Type Tester config
| Property |
Description |
Type |
min |
Min font size |
number (deprecated, see size) |
max |
Max font size |
number (deprecated, see size) |
selectable |
Makes the font family and style selectable with a dropdown |
boolean |
selectButtonLabel |
The select button label (defaults to ‘Select’) |
string |
shy |
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’. When the controls hide, an open OpenType features panel or dropdown closes with them (with the npm package, this needs fontdue-js 3.12.0 or later). Defaults to false |
'hover' | 'focus' | true | false |
selectButtonStyle |
Choose from the button styles |
'inline' | 'outlined' |
initialMode |
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 |
'local' | 'global' |
groupEdit |
Whether to enable or disable the group edit toggle (Affect all styles) |
boolean |
textInput |
Enables the input to control the font size value in pixels |
boolean |
buyButton |
(Renamed to selectButton) |
boolean |
selectButton |
Enables the Select button. Clicking this button opens the StoreModal with the relevant font style selected |
boolean |
toolsPosition |
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’ |
'inline' | 'floating' |
truncate |
Caps the sample paragraph at a number of lines. false (the default) is off. A number caps it at that many lines, and the cap stays in place while a visitor edits the text. true is the original one-line preview, which opens to the full paragraph when clicked. Pass an object – { lines: 20, expandOnFocus: true } – to set both explicitly. Note you may need to increase the “Line height” value to prevent text being chopped off |
boolean | number | { lines?: number, expandOnFocus?: boolean } |
bulletStyle |
Choose bullet styles, e.g. in the OpenType features panel. Defaults to square |
'square' | 'round' |
autofitOnChange |
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 |
boolean |
openTypeFeatures |
See below |
object |
alignmentButtons |
Set to true to enable text alignment buttons |
boolean |
initialAlignment |
Defaults to left |
'left' | 'center' | 'right' |
size |
Controls for the Size slider. Defaults to { min: 10, max: 200, label: 'Size' } |
object |
lineHeight |
Controls for the Line height slider. Defaults to undefined. Set this value to {} for the default values: { min: 0.7, max: 2, label: 'Line height' } |
object |
variableAxesPosition |
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 |
'auto' | 'features-panel' | 'inline' | 'above' |
priceText |
Whether to show the price next to the select button |
boolean |
letterSpacing |
Controls for the Letter spacing slider. Defaults to undefined. Set this value to {} for the default values: { min: -0.05, max: 0.2, label: 'Letter spacing' } |
object |
columns |
Control columns logic. The default settings are { count: 'auto', width: '40ch', gap: '1em' } to tell the browser to automatically make columns ~40 characters wide. You may turn it off by setting columns: false. |
false | { count, width, gap } |
Type Tester OpenType features config
| Property |
Description |
Type |
columns |
Control how the list of OpenType features appear in columns.. If left empty, features will appear in the order set in the Type Testers section of the CMS, automatically organized into 4 columns |
object[] |
selectionStyle |
Selection style for features in the panel and dropdown experiences. Defaults to bullet |
'bullet' | 'checkbox' |
interactionStyle |
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. The dropdown experience reveals a single-column overlay. |
'panel' | 'select' | 'dropdown' |
buttonLabel |
Label for the button, defaults to “OT Features” |
string |
OpenType features column config
| Property |
Description |
Type |
features |
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' } |
({ code, name } | string)[] |
range |
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 |
number |
Slider config
| Property |
Description |
Type |
min |
Minimum size for the slider |
number |
max |
Maximum size for the slider |
number |
label |
Label for the slider. Set to false to disable. |
string | false |
Form config
| Property |
Description |
Type |
checkboxStyle |
Icon style for checkboxes across components. Defaults to ‘check’ |
'check' | 'cross' |
Checkboxes are 20px squares with a 10px gap before their label. To change that, set the CSS custom properties --checkbox-size and --checkbox-margin in your own stylesheet – on :root for every checkbox, or on a component’s element for one place (for example fontdue-test-fonts-form { --checkbox-size: 40px; --checkbox-margin: 20px; } for the larger box the forms used before). --checkbox-color sets the border colour.
Test fonts config
These options apply to every Test Fonts Form on the site. Leaving one unset uses what Settings → Test fonts says in your dashboard.
| Property |
Description |
Type |
familySelection |
Which families a download holds: every family ('all'), or the ones the customer ticks in a list of checkboxes ('choice'). The dashboard’s Families in each download setting |
'all' | 'choice' |
familyGrouping |
How the 'choice' checkboxes are listed: one flat list of families ('flat'), or families grouped under their superfamily, whose checkbox ticks them all ('superfamily'). The dashboard’s Family list setting |
'flat' | 'superfamily' |
Store Modal config
| Property |
Description |
Type |
indexLayout |
Alternate layouts for the Store Modal’s initial “browse” index page. Defaults to ‘styled-aa’ |
'styled-aa' | 'styled-font-names' |
productLicensesPosition |
On the product pages, controls the position of licenses selection, above or below the product selection. Defaults to ‘top’ |
'bottom' | 'top' |
indexExcludeTags |
Keeps font collections and font packs carrying any of these tags off the store index page, e.g. [“free”] |
string[] |
hideAllCollections |
Skip the store modal’s initial “browse” index page. The modal opens straight to the cart, and the cart button always opens the cart regardless of item count. Defaults to false |
boolean |
returnUrl |
Where the order page’s link back goes once the buyer has paid, instead of your site’s address. Relative URLs resolve against the current page |
string |
returnLabel |
The text of that link. Defaults to “Back to” and the URL’s host |
string |
After paying, a buyer always lands on the order page Fontdue hosts on your store’s domain, where they download their fonts. It ends with a link back to your site. returnUrl changes where that link goes, for orders checked out in a Store Modal that sets it – a font’s own minisite, for example, can bring its buyers back to itself rather than to your main site:11The script tag reads returnUrl as soon as Fontdue deploys it. A site on the npm package needs fontdue-js 3.15.0 or later.
fontdue.initialize({
url: "https://your-site.fontdue.com",
config: {
storeModal: {
returnUrl: "https://example-sans.your-foundry.com/",
returnLabel: "Back to Example Sans",
},
},
});
The URL has to be on one of the domains in Cross-origin API access (Settings → Integration), your site’s address or the store’s own domain. The order page ignores anything else and links to your site as usual – it carries your name and logo, and shouldn’t link to another site. The link comes from the checkout the buyer paid in, so opening the order page later from the receipt email links to your site.
Stripe config
| Property |
Description |
Type |
appearance |
Customize the appearance of Stripe elements (e.g. the Address element). Find the full documentation for the appearance API here: https://docs.stripe.com/elements/appearance-api |
|
| Fontdue sets the fonts property for you, based on the selected UI Font |
Appearance |
|
1 The script tag reads
returnUrl as soon as Fontdue deploys it. A site on the npm package needs
fontdue-js 3.15.0 or later.
↩