A feature tester is a card that showcases one OpenType feature of a font: a line of sample text rendered in the webfont, with the characters the feature affects highlighted, and a switch that applies the feature so visitors watch the substitution happen. This component renders every feature tester configured on a font collection, in the order set in the admin. You must first add the cards through the Fontdue admin – open the collection and use the Feature testers tab.
<fontdue-feature-testers
collection-slug="ibm-plex"
></fontdue-feature-testers>
import FeatureTesters from "fontdue-js/FeatureTesters";
<FeatureTesters collectionSlug="ibm-plex" />
Each card in the admin binds one feature to one font style: pick the feature code (the picker lists only the features the chosen style actually contains), a sample text, and optionally a custom label, size, line height, alignment, and autofit.11The tab’s Populate all features button adds a card for every feature found in the collection’s fonts as a starting point. Features that already have a card are skipped, so it’s safe to run again after uploading a new version – and so are features that wouldn’t change any sample text, so every card it creates has something to show. Fontdue works out which characters of the sample the feature changes, and the card highlights exactly those – affected characters render at full text color while the rest of the sample is muted.
Two settings at the top of the Feature testers tab apply to the whole collection rather than per card: Features on by default controls whether each card starts with its feature applied, and Show the feature code tag controls the small code (ss03, frac, …) on the right of each card’s bar. The component reads both from the collection – they are not element attributes. The Bulk settings button beside Populate all features sets every card’s size, line height, alignment, and autofit at once.
On a server-rendered framework, preload the group in your loader with loadFeatureTestersQuery and pass the result as preloadedQuery, see lazy versus preloaded:
import FeatureTesters, { loadFeatureTestersQuery } from "fontdue-js/FeatureTesters";
const testers = await loadFeatureTestersQuery({ collectionSlug: "ibm-plex" });
<FeatureTesters preloadedQuery={testers} />
| Property | Description | Type |
|---|---|---|
collection-id or collection-slug |
Identifier for the collection | string Required |
toggle |
Interaction model for every card: a visible switch (button, the default), or no switch with the feature toggling while the card is hovered (hover) |
'button' | 'hover' |
autofit |
Fit every sample to the container width, overriding the per-card admin setting. Leave the attribute off to let each card use its own setting | 'true' | 'false' |
highlight-color |
Color for the affected characters, replacing the default full-text-color highlight | string |
| Prop | Description | Type |
|---|---|---|
collectionId or collectionSlug |
Identifier for the collection. Required unless you pass preloadedQuery. |
string |
preloadedQuery |
Server-preloaded data from loadFeatureTestersQuery, passed instead of an identifier. |
object |
toggle |
Interaction model for every card: a visible switch (button, the default), or no switch with the feature toggling while the card is hovered (hover) |
'button' | 'hover' |
autofit |
Fit every sample to the container width, overriding the per-card admin setting. Leave undefined to let each card use its own setting | boolean |
highlightColor |
Color for the affected characters, replacing the default full-text-color highlight | string |