Type tester editor - Fontdue Docs

Every font collection has a Type testers tab on its edit page, where you configure the sample type testers that power the frontend Type Testers component. Each tester is a single preview – a line (or block) of text rendered in a specific style with a specific set of OpenType features and variable axis settings applied.

Fontdue gives you two ways to build out this list:

The waterfall tool generates one tester per style in a consistent order – good for a complete collection showcase where every style appears the same way.
Manual testers are created one at a time with free-form text and per-tester settings – good when you want each tester to say something different or showcase a particular style.

By default, running the waterfall tool replaces every tester on the collection, so the two approaches don’t mix freely. To run multiple waterfalls on the same collection, or to keep manual testers alongside a waterfall, scope each waterfall to a tag – see Scoping with tags below.

Waterfall tool

The waterfall tool creates one type tester for every style in the collection (and every named instance of a variable font), sorted in an order you choose. It’s the fastest way to set up a complete preview and the recommended starting point for any collection.

Click Waterfall tool in the tab header (or Open waterfall tool in the empty state) to open the side sheet. Changes apply live as you edit – there’s no separate Generate button. Each change to the sort order or bulk settings regenerates the testers in the tool’s current scope from scratch, so don’t mix hand-tuned testers in with waterfall-generated ones in the same scope. See Scoping with tags for how to run more than one waterfall on a collection.

Sort order

Add one or more sorts to control the order of generated testers. Drag to reorder the sorts themselves – earlier sorts take precedence.

Weight order: sorts by CSS weight (e.g. Thin → Black).
Style order: sorts by CSS style (Regular before Italic, etc.).
Width order: sorts by CSS stretch (Condensed → Expanded).
Variable axis sorts: one option per exposed variable axis. Orders by named instances along that axis.
Family order: sorts by family within a superfamily. The sort row shows a nested list of selected families with an Add family picker; drag to reorder, click the X to remove. Only the selected families contribute styles to the waterfall, so this also acts as a family filter – useful for limiting a waterfall to part of a superfamily. The list defaults to every family the first time you add the sort, so visible state doesn’t change at that moment.

Only sorts that apply to this collection are shown – weight, style, and width sorts only appear if the collection has more than one of each, and family order only appears on superfamilies.

Content

A multi-line textarea – one line per generated tester. If you enter fewer lines than there are testers, the lines cycle (tester 4 uses line 1, tester 5 uses line 2, etc.). Leave it empty and each tester defaults to The quick brown fox jumps over the lazy dog.

Bulk settings

Applied uniformly to every generated tester:

Size: display size in pixels. Default 72. Disabled when Autofit is on.
Line height: default 1.2.
Letter spacing: range -1 to 1, default 0.
Direction: left-to-right or right-to-left.
Autofit: size adjusts to fill the frontend tester container at render time.

Variable font instances keep their axis coordinates automatically – the waterfall expands each variable font into one tester per named instance, preserving the instance’s variable settings.

Manual testers

Use Add new in the tab header (or Add one in the empty state) to add a tester. Click any tester in the list to open the edit sheet on the right, where you set its fields one at a time:

Font style: which style in the collection this tester uses. For variable fonts, the dropdown lists named instances.
Content: the sample text.
Size, Letter spacing, Line height: per-tester values. Size is disabled when Autofit is on.
Autofit: when on, the text scales to fill the customer-facing tester at render time.
Writing direction: left-to-right or right-to-left.
OpenType features (default selected): the features exposed on the collection that should start on for this tester. Customers can still toggle them.
Tags: labels for grouping. Used by the Type Testers component to filter testers into sections, and by the waterfall tool to scope generation to a subset (see Scoping with tags below).

Edits save automatically as you change fields. Drag testers in the list to reorder them; the display mode toggle (the magnifying glass icon in the tab header) switches between scaled preview and true size. Use Delete all type testers in the ellipsis menu to clear the list.

Scoping with tags

Out of the box, the waterfall tool manages every tester on the collection – each regenerate replaces the whole list. Scoping a waterfall to a tag narrows it to just the testers carrying that tag, leaving everything else untouched. This lets a single collection hold more than one waterfall, or a waterfall alongside hand-tuned manual testers.

Above the tester list, the Tag filter narrows what’s shown. Pick one or more tags and the list, the Add new button, and the waterfall tool all scope to those tags. Open the tool with a filter active and it only sees, generates, and replaces testers in scope.

A few patterns this unlocks on a single collection:

Multiple waterfalls: tag one batch weights and another widths, then configure a separate waterfall for each. Each has its own sort order, content, and bulk settings; regenerating one leaves the other alone.
Waterfall plus manual testers: tag the waterfall-generated set (e.g. showcase) and leave your hand-tuned testers untagged. With the tag selected, regenerating the waterfall doesn’t touch the manual testers.

Inside the waterfall sheet, the header shows the current scope plus an actions menu:

Scope dropdown: switches between All testers and each existing tag. All testers is the “default” waterfall, and in that mode it only manages untagged testers. When tagged testers exist alongside the default scope, a warning reminds you that untagged manual edits will be regenerated.
Apply tag… / Rename tag… / Untag these testers: bulk operations across the testers in the current scope. Use Apply tag to convert a batch of existing testers into a named waterfall, Rename tag to relabel one, or Untag to merge a tagged set back into the default scope.

Adding a new tester from the index while a tag filter is active inherits those tags, so the new tester lands inside the current scope rather than in the default (untagged) bucket.

These admin tags are the same ones the frontend Type Testers component reads via its tags and exclude-tags props, so the same tag can drive both how the waterfall is managed in the admin and which testers appear on a given page of your site.

Exposing features and axes

At the top of the Type testers tab, two controls determine what customers can interact with in the frontend Type Testers component:

OpenType features: select which features (e.g. ss01, dlig) appear as toggleable controls.
Variable axes: select which axes appear as sliders.

These selections apply to the whole collection, not to individual testers. Per-tester feature and axis settings set the starting values; the exposed list controls what the customer can change.

How this connects to the frontend

When you embed <fontdue-type-testers> on your site or use the React <TypeTesters> component, it fetches the collection’s type testers from Fontdue and renders each one in order. Changes you save here appear on your site immediately.¹¹If you’ve enabled a deploy hook, content changes trigger a rebuild so the cache updates. Without a deploy hook, your site may cache old data briefly.

¹ If you’ve enabled a deploy hook, content changes trigger a rebuild so the cache updates. Without a deploy hook, your site may cache old data briefly. ↩