Working on Fountain, I needed something I could drop into any HTML page, style to match a foundry’s brand, and extend without fighting the underlying framework. A web component felt like the obvious answer, and basic HTML would be easy for beginners to work with.

Each <font-tester> (font-tester on Github) instance gets its own shadow root. With 18 or even more styles to test on a page, isolated style recalculation makes a real difference. No dependency bleed, no cascade conflicts, no surprises.

What it does

The component handles everything you’d expect from a decent font tester:

• Live editable preview text
• Style and weight variant switching
• Sliders for size, line height, and letter spacing
• Variable font axis controls (rendered as range sliders that compose into a single font-variation-settings value)
• OpenType feature toggles
• Custom sample texts with a dropdown selector
• Lazy font loading via an optional font-loader bridge

The controls are opt-in via a controls attribute, so you only show what’s relevant for a given font. A display typeface doesn’t need a line height slider. A variable font doesn’t need a style dropdown.

The fit-width trick

One feature I’m particularly happy with is fit-width. Add it to a tester and the component calculates the exact font size needed to fill the preview area. It accounts for letter spacing, variable axes, and OpenType features. Useful for headline display testing where you want the text to feel massive without manually hunting for the right pixel value.

It has two modes: each recalculates on every font or style change, and once sets the size on first load and then steps back. The once mode is there for when you want an automatic starting point but still want full manual control afterwards. If a font size slider is in the controls, it stays in sync either way.

The calculation uses the browser’s layout engine directly, so it’s always accurate. A 2px safety margin prevents overflow edge cases.

Theming

The whole thing (fingers crossed) is theme-able via CSS variables and ::part() selectors. There’s a reference stylesheet (font-tester-theme.css) you can copy as a starting point. You get pretty good control without needing to touch the component internals.

font-tester { --container-max-width: 1200px; }

font-tester text-controls::part(button) { border-radius: 0; }

No dependencies

The component itself has no external dependencies. The optional font-loader integration uses the FontFace API for lazy loading, but if you’re already registering fonts with @font-face in CSS, you don’t need it.

Built for Fountain, works anywhere

I built font-tester as part of Fountain, the e-commerce platform I’m developing for type foundries. But the component is deliberately decoupled, it’s MIT licensed, lives in its own repository, and works on any HTML page regardless of what’s running behind it.

If you run a type foundry and want a font tester that doesn’t require a JavaScript framework and can be styled to look exactly like your site, I hope this might be what you’ve been looking for.