Make it your own.

The pages, text styles, links and family content are native Framer. The live specimen is one separate component. Update both the family content and its font configuration when you replace a demo family.

Start with the pages

Edit the Counterform wordmark, introductory copy, shared text styles and navigation in Framer. The eight page types are Home, Families, Family detail, Glyph reference, Reading room, Licensing, Template Guide and 404.

Keep the source journey intact: visitors can try a family, open its detail, inspect selected characters, and follow its original source and licence. There is no demo checkout, cart, booking form or sales claim to remove.

Update the Families collection

The demo contains three records: Fraunces, Syne and Spline Sans Mono. Edit Name, Key, credit fields, Description, Classification, ComparisonPrompt, BodySpecimen, GlyphSample, GlyphSupportNote, weight limits, version, licence and source links. Slug is the page address; changing it also requires checking the curated native links.

Key supplies the live specimen record ID. DisplayPreset must be none, or fraunces-soft only for the archived Fraunces file. Fallback must be serif, sans-serif or monospace. The three native demo comparisons use IsFraunces, IsSyne and IsMono; enable only the matching flag. Adding a different family also requires creating its native comparison and font styles.

Configure the live specimen

The home Counterform Specimen uses Families: an editable list of up to eight font records. Each has ID, Name, Font URL, Min weight, Max weight, Credit, Source URL, License URL, License label, Display axes and Fallback. Edit this list in the Framer properties panel.

Use a unique id and a reachable font-file URL that you are allowed to use. Set the actual supported minimum and maximum weight; equal values describe a fixed weight. The component clamps its control to these bounds. Failed font loads display a fallback message.

Start family ID chooses the initial record. Text controls Reset text. Size / wide and Size / narrow set starting sizes; Min size and Max size bound the size slider. Weight is clamped to the selected font range. Ink and Selection set the component colours.

displayPreset accepts none or fraunces-soft. The latter is only for the audited Fraunces file and fixes optical size 144, softness 100 and wonk 1. It does not add user controls for those axes. fallback accepts serif, sans-serif or monospace.

Keep native specimens in step

The home and Families indexes are three curated one-item CMS lists. Their native text styles deliberately use three different actual families. Adding or replacing a family requires updating its list entry, link and native font style as well as the CMS record and live specimen configuration.

The reading and glyph pages also contain native text using named Framer families. Replace these styles and recheck the chosen character samples when changing fonts. The native hosted font and the live specimen file can have different versions; record what you actually use.

Family detail and component data

The family detail contains one CMS family specimen with Single family enabled. Its Record ID, name, font URL, minimum, maximum, credit, source, licence, licence label, display and fallback controls are bound to the current Families record. Text, Size / wide and Weight also come from that record. A new complete CMS record can use this same live specimen without changing its code.

The home Families list is a separate editable registry; update it in the properties panel after adding or replacing CMS content. The three native indexes and the reading, glyph and weight samples use explicit font styles. Update those curated styles, links and comparison flags when replacing a demo. The automation cannot write list-of-object controls or convert a font-name string into a native text face.

Motion and smaller screens

Typing is immediate. Play weight range makes a finite pass and returns to the starting weight; Stop weights interrupts it. Changing family, editing text or moving a control also stops playback. With reduced motion the control sets the maximum weight without animation.

Review the native layouts at 390, 768, 1200 and 1440px, plus a width between breakpoints. Keep desktop composition active from 1200px. Allow long text and author credits to grow, and keep controls reachable without hiding them behind the specimen.

Before publishing

Check every family with your own short and long text. Confirm its source and licence links, the loaded font, weight bounds and reset behaviour. Check the native reading and glyph styles, page titles, descriptions, links, phone layout and 404 route.

If you redistribute font files, preserve their original notices and licence files. When replacing the demo, remove unsupported claims and add your own accurate author/source information. Add a template remix link only after that destination has been verified.