Configuration

Configuration options for fontdue.initialize()

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
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’. 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 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 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 experience. 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. 'panel' | 'select'
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'

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 You may exclude some font collections from the store index page by specifying tags to exclude, 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

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