Font tester

Interactive web component for testing and previewing fonts. No dependencies. Built for Fountain but works anywhere. It’s open source and available here: Font tester on Github with a demo.

Features

Live text preview with editable text
Font style/weight variant selector
Adjustable size, line height, and letter spacing
Variable font axis sliders
OpenType feature toggles
Custom sample texts
Lazy font loading via font-loader (optional)
Themeable via CSS custom properties and ::part()
i18n support

Markup

Web components comes with a cleaner markup, wich is nice when you’re working with Kirby. It looks like this:

<font-tester font-family="my-font" controls="text-controls,font-size,line-height,letter-spacing,font-style,opentype">

  <!-- Font style variants -->
  <font-style name="Regular" family="my-font" weight="400" style="normal" default></font-style>
  <font-style name="Italic" family="my-font" weight="400" style="italic"></font-style>
  <font-style name="Bold" family="my-font" weight="700" style="normal"></font-style>

  <!-- OpenType features -->
  <opentype-feature code="kern" name="Kerning" default></opentype-feature>
  <opentype-feature code="liga" name="Ligatures" default></opentype-feature>
  <opentype-feature code="smcp" name="Small Caps"></opentype-feature>

  <!-- Sample texts (first is shown by default; named ones appear in the dropdown) -->
  <sample-text>The quick brown fox jumps over the lazy dog</sample-text>
  <sample-text name="Alphabet">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</sample-text>
  <sample-text name="Numbers">0123456789</sample-text>

</font-tester>