Typography customization

The Typography section of the Finder Builder lets you pick a body font, a heading font, and a base text size. These choices flow into every rendered element of the visitor-facing widget through CSS custom properties.

For the full Design section overview, see Customization overview. For colors and themes, see Themes and Custom colors.

Where to find it

In the Finder Builder, open the Design section in the left sidebar and scroll to the Typography subsection. Two font dropdowns and one size slider are grouped there.

🟡 [SCREENSHOT: The Typography subsection in the Finder Builder sidebar, showing the Body font and Heading font dropdowns with “DM Sans” selected in both, and the Base size slider set to 15px.]

Available fonts

The builder offers seven choices for both the body font and the heading font:

Body font and heading font are independent — you can pair the same font across both or mix intentionally (for example, a display-weight geometric for headings, a neutral sans for body copy).

Font delivery

🔴 [NEEDS CLARIFICATION: Confirm whether the widget dynamically injects a Google Fonts <link> for the selected body/heading fonts at runtime. The current Reset.svelte hardcodes a single Google Fonts request for DM Sans, DM Mono, and Instrument Serif only. Selecting Inter, Space Grotesk, or other non-DM-Sans fonts from the builder dropdown may rely on the host page already loading those fonts or on system font fallbacks. This affects the accuracy of font rendering outside of DM Sans.]

What is confirmed:

• The widget always issues a Google Fonts request for DM Sans (weights 400, 500, 600, 700), DM Mono, and Instrument Serif at mount time.
• If you select a non-DM-Sans font (e.g. Inter, Space Grotesk), that font is set as the CSS font-family declaration. If the font is not available in the visitor’s browser or loaded by the host page, the browser falls back to Inter, then ui-sans-serif, then system-ui.
• The System font option (system-ui, sans-serif) never makes an external font request. It is the most performant choice.

DM Sans is the safest default

DM Sans is the only font guaranteed to render exactly as designed across all visitor environments, because it is always fetched by the widget. All 16 built-in color presets are tested and tuned against DM Sans.

Base size

The base size slider controls the root font-size of the widget in px. All widget text is sized relative to this value — changing it scales the entire widget up or down proportionally.

💡 Tip: Match the base size to your host page’s body font size for a seamless embed. Most consumer sites use 15–16 px. If the widget looks “too small” or “too big” relative to surrounding content, adjust this first before changing anything else.

Heading scale

🔴 [NEEDS CLARIFICATION: Confirm the exact heading scale multipliers (h1, h2, h3 in rem units relative to the 62.5% root size set in Reset.svelte). The base CSS sets font-size: 62.5% on #finder-app, so fontSizeBase overrides the root font-size and all rem-sized headings scale with it — but the exact rem values per heading level aren’t enumerated in the current digest. Confirm before documenting the scale table.]

Practical pairings

Editorial layouts

Certain layout modes expose an additional editorial font slot for pull-quote or hero typography. That slot defaults to "Instrument Serif" — a variable-weight serif loaded alongside DM Sans. It does not appear in the standard Typography dropdowns; it is controlled via the editorial layout settings.

What gets affected

The fonts and base size you set apply to every element in the visitor widget: search bar, result list, location detail card, tags, map tooltips, and refinement chips. There is no element-level font override in the UI — if you need per-element control, target the CSS custom properties listed above in your host page’s stylesheet.

CSS variables (for advanced use)

The fonts are exposed as CSS custom properties on #finder-app:

Host-page CSS cannot override these after mount without !important because the widget sets them inline on the root element.

Where to next

• Themes — color presets that pair with any typography choice
• Shape and corner radius — roundness presets
• Customization overview — all design knobs in one place