Type tester config

PropertyTypeDescription
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' }