Type Testers

Group of type tester components for a collection

A group of type tester components for a collection. You must first add content for the collection’s type testers through the Fontdue dashboard.

<fontdue-type-testers

  collection-slug="ibm-plex"

  default-mode="local"

></fontdue-type-testers>

import TypeTesters from "fontdue-js/TypeTesters";



<TypeTesters

  collectionSlug="ibm-plex"

  defaultMode="local"

/>

On a server-rendered framework, preload the group in your loader with loadTypeTestersQuery – it takes the same tags/excludeTags filters – and pass the result as preloadedQuery, see lazy versus preloaded:

import TypeTesters, { loadTypeTestersQuery } from "fontdue-js/TypeTesters";



const testers = await loadTypeTestersQuery({ collectionSlug: "ibm-plex" });



<TypeTesters preloadedQuery={testers} />
Property Description Type
autofit Set to true to make the sentence fit on one line. It will adjust to the width of the tester as the user changes their browser window. If the user changes the font size or edits content, autofitting is turned off for that tester 'true'
default-mode The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, group turns it on 'local' | 'group'
collection-id or collection-slug Identifier for collection string Required
tags Comma-separated list of tags. Will render only type testers that include these tags string
exclude-tags Commas-separate list of tags to exclude. Will exclude type testers that include these tags string
Prop Description Type
autofit Set to true to make the sentence fit on one line. It will adjust to the width of the tester as the user changes their browser window. If the user changes the font size or edits content, autofitting is turned off for that tester boolean
defaultMode The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, group turns it on 'group' | 'local'
collectionId or collectionSlug Identifier for the collection. Required unless you pass preloadedQuery. string
preloadedQuery Server-preloaded data from loadTypeTestersQuery, passed instead of an identifier. object
tags Array of tags. Will render only type testers that include these tags string[]
excludeTags Array of tags to exclude. Will exclude type testers that include these tags string[]