Type Tester (standalone)

A single instance of the type tester where you enter the content as component attributes, rather than managing the content in the Fontdue admin.

Basic

<fontdue-type-tester
  family-name="IBM Plex Sans"
  style-name="Regular"
  content="The quick brown fox jumps over the lazy dog"
></fontdue-type-tester>

import TypeTester from "fontdue-js/TypeTester";

<TypeTester
  familyName="IBM Plex Sans"
  styleName="Regular"
  content="The quick brown fox jumps over the lazy dog"
/>;

Autofit

<fontdue-type-tester
  family-name="IBM Plex Serif"
  style-name="Bold"
  autofit="true"
  content="This sentence fits on one line"
></fontdue-type-tester>

<TypeTester
  familyName="IBM Plex Serif"
  styleName="Bold"
  autofit
  content="This sentence fits on one line"
/>;

Center aligned

<fontdue-type-tester
  family-name="IBM Plex Mono"
  style-name="Light"
  font-size="36"
  alignment="center"
  content="Centered text"
></fontdue-type-tester>

<TypeTester
  familyName="IBM Plex Mono"
  styleName="Light"
  fontSize={36}
  alignment="center"
  content="Centered text"
/>;

OpenType features

<fontdue-type-tester
  family-name="IBM Plex Sans"
  style-name="Bold"
  font-size="48"
  features="onum,tnum,frac"
  features-selected="onum,frac"
  content="Order 1/2 of 1,234 items at 3:00pm"
></fontdue-type-tester>

<TypeTester
  familyName="IBM Plex Sans"
  styleName="Bold"
  fontSize={48}
  features={["onum", "tnum", "frac"]}
  featuresSelected={["onum", "frac"]}
  content="Order 1/2 of 1,234 items at 3:00pm"
/>;

Paragraph / columns

<fontdue-type-tester
  family-name="IBM Plex Serif"
  style-name="Regular"
  font-size="16"
  line-height="1.6"
  content="Typography is the art and technique..."
></fontdue-type-tester>

<TypeTester
  familyName="IBM Plex Serif"
  styleName="Regular"
  fontSize={16}
  lineHeight={1.6}
  content="Typography is the art and technique..."
/>;

Letter spacing

<fontdue-type-tester
  family-name="IBM Plex Mono"
  style-name="Regular"
  font-size="36"
  letter-spacing="0.15"
  alignment="center"
  content="WIDELY SPACED UPPERCASE"
></fontdue-type-tester>

<TypeTester
  familyName="IBM Plex Mono"
  styleName="Regular"
  fontSize={36}
  letterSpacing={0.15}
  alignment="center"
  content="WIDELY SPACED UPPERCASE"
/>;

This standalone tester also takes a preloadedQuery – preload it in your loader with loadTypeTesterQuery from the family and style names, then pass the result instead of familyName/styleName, see lazy versus preloaded:

import TypeTester, { loadTypeTesterQuery } from "fontdue-js/TypeTester";

const tester = await loadTypeTesterQuery({ familyName: "IBM Plex Sans", styleName: "Regular" });

<TypeTester preloadedQuery={tester} content="The quick brown fox" />

Property	Description	Type
`family-name`	Font family name (must have been already uploaded to your Fontdue admin)	`string` Required
`style-name`	The name of the style from the family to display. Note that variable fonts have one or more Font Styles, these represent each font file that make up the designspace of the font.	`string` Required
`font-size`	Initial font size in pixels.	`string`
`line-height`	Line-height as a proportional value where 1 == font-size.	`string`
`content`	The initial content to display.	`string`
`features`	Comma-separated list of opentype feature codes to expose as options to users. (e.g. ss01,ss02,ss03)	`string`
`autofit`	See the autofit option for fontdue-type-testers above.	`string`
`features-selected`	Comma-separated list of opentype feature codes to be selected by default	`string`
`variable-settings`	If this type tester points to a variable font, set the variable font settings here with a comma-separated list of settings. Each setting must have the format `axis value`, e.g. `wdth 1000, ital 0.5`. The instance dropdown will register a named instance if its coordinates match up with the settings supplied here.	`string`
`axes`	Comma-separated list of variable axes to expose (e.g. wdth,opsz)	`string`
`alignment`	Text alignment	`'left' \| 'center' \| 'right'`
`direction`	Text direction (used for right-to-left scripts)	`'rtl' \| 'ltr'`
`letter-spacing`	Letter spacing as a decimal value (e.g. “0.05”)	`string`

Prop	Description	Type
`familyName`	Font family name (must have been already uploaded to your Fontdue admin). Required unless you pass `preloadedQuery`.	`string`
`styleName`	The name of the style from the family to display. Note that variable fonts have one or more Font Styles, these represent each font file that make up the designspace of the font. Required unless you pass `preloadedQuery`.	`string`
`preloadedQuery`	Server-preloaded data from `loadTypeTesterQuery`, passed instead of `familyName`/`styleName`.	`object`
`fontSize`	Initial font size in pixels.	`number`
`lineHeight`	Line-height as a proportional value where 1 == font-size.	`number`
`content`	The initial content to display.	`string`
`features`	Array of opentype feature codes to expose as options to users (e.g. `["ss01", "ss02", "ss03"]`)	`string[]`
`autofit`	Auto-fit text to the width of the tester.	`boolean`
`featuresSelected`	Array of opentype feature codes to be selected by default	`string[]`
`variableSettings`	Array of variable font axis settings. Each object has `axis` (string) and `value` (number) properties.	`object[]`
`axes`	Array of variable axes to expose (e.g. `["wdth", "opsz"]`)	`string[]`
`alignment`	Text alignment	`'left' \| 'center' \| 'right'`
`direction`	Text direction (used for right-to-left scripts)	`'rtl' \| 'ltr'`
`letterSpacing`	Letter spacing as a decimal value (e.g. 0.05)	`number`