Test Fonts Form

Displays a form for users to enter their information and download test fonts. Make sure you have configured Test Fonts for this to work.

<fontdue-test-fonts-form
  download-label="Download test fonts"
  newsletter-checkbox-checked
></fontdue-test-fonts-form>

import TestFontsForm from "fontdue-js/TestFontsForm";

<TestFontsForm
  downloadLabel="Download test fonts"
  newsletterCheckboxChecked
/>

import TestFontsForm, { loadTestFontsFormQuery } from "fontdue-js/TestFontsForm";

const testFonts = await loadTestFontsFormQuery();

<TestFontsForm preloadedQuery={testFonts} />

Letting customers choose families

By default the download holds every family your test fonts settings include. Setting Families in each download to Customer’s choice in the dashboard makes every Test Fonts Form on your site list those families with a checkbox each, plus a Select all checkbox, and the download holds only the ticked families. The download button stays disabled until at least one family is ticked, and a catalog with a single family shows no checkboxes.

To override the dashboard setting in code, set testFonts.familySelection in the configuration, or the family-selection attribute (familySelection prop) on one form.

Grouping by superfamily

Setting Family list to Grouped by superfamily in the dashboard – or testFonts.familyGrouping: 'superfamily' in the configuration, or the family-grouping attribute (familyGrouping prop) on one form – nests the families of each superfamily under a checkbox for the superfamily, which ticks or unticks them all. The superfamily stays ticked only while all of its families are. Families without a superfamily, and a superfamily with a single family in the list, keep a row of their own. Grouping needs fontdue-js 3.11.0 or later.

A group renders as a div.test-fonts__family-group holding the superfamily’s .test-fonts__superfamily row and a div.test-fonts__family-group__families with its .test-fonts__family rows, indented to line up with the superfamily’s label. To offer whole superfamilies only, hide .test-fonts__family-group__families in your CSS.

The list renders as a div.test-fonts__families holding a .test-fonts__families__all row and a .test-fonts__family row per family. Each row is also a .test-fonts__checkbox-field, in tighter rows than the agreement and newsletter checkboxes.

Limiting the download to a family

A form on a family’s own page can offer just that family. Name it with collection-slug or collection-id – a comma-separated list for more than one, and a superfamily stands for all of its families. The form then shows no checkboxes and downloads exactly those families, regardless of the family selection setting.

<fontdue-test-fonts-form
  collection-slug="example-sans"
></fontdue-test-fonts-form>

import TestFontsForm from "fontdue-js/TestFontsForm";

<TestFontsForm collectionSlug="example-sans" />

If none of the named collections has test fonts – a typo in the slug, or a family outside Included font families – the form is replaced by the message “Test fonts aren’t available for this family.” in a div.test-fonts--unavailable.

Both features need fontdue-js 3.9.0 or later: the <script> tag has it already, and an npm install needs updating the package. An older fontdue-js ignores these attributes and downloads every family.

Properties