Show the Chat Widget in Your Brand's Font
Your chat widget can use the same typeface as the rest of your store. Pick one of the curated fonts from the dropdown, or point Rep AI at a font file you already host, and every piece of text the shopper reads — the chat window, the launcher label, proactive messages, and the embedded widgets on your product pages — renders in that font.
Where to find it
In your Rep AI Console, go to Settings > Chat Widget.
Select the Design tab, then the Basics tab.
Scroll to the Font section, just below Colors.
The Font section is available for both widget styles — Classic and Rep 2.0.
Option 1: Choose a preset font
Select Preset, then pick a font from the Font dropdown:
Style | Fonts |
|---|---|
Modern sans | Inter, Poppins, Montserrat |
Neutral sans | Roboto, Open Sans, Assistant |
Geometric and friendly | DM Sans, Nunito Sans |
Editorial serif | Playfair Display, Lora |
These are all open-licensed web fonts, so there is nothing to buy, install, or host — Rep AI loads them for you.
Choosing Default at the top of the list returns the widget to its standard typography.
Option 2: Link your own brand font
If your brand font is not in the list, select Custom and paste a link to the font file in the Font file URL field.
The link needs to meet three requirements:
It starts with
https://It points directly at a
.woff2file (a?v=version tag on the end is fine)The file is publicly reachable, and its host allows other sites to load it
In practice the easiest source is the font your store's theme already uses — theme asset folders and store CDNs serve fonts in exactly this way. Copy the direct link to the .woff2 file and paste it in.
Rep AI references your file at the address you provide; it is never copied or re-hosted. You are responsible for holding the right licence for any font you link.
Preset and custom are mutually exclusive — picking a preset clears a custom link, and switching back to Preset clears it too.
Watch it before you save
The previews on the right side of the page update as you choose, including the Classic view, the proactive bubble, and the expanded preview. Paste a link and the previews answer within a moment — you do not need to click away from the field.
When you are happy with it, click Save and Preview in the top-right corner. The font applies to new chat sessions right away; shoppers do not need to clear their cache.
What the field tells you
The Font file URL field checks your link as you type and reports back:
"Enter a direct HTTPS link to a .woff2 file." — the link is not the right shape. Check that it begins with
https://and ends in.woff2."We couldn't load a font from this link…" — the shape is right, but the file could not be fetched. The address may be wrong, the file may have been moved or deleted, or its host may not allow other sites to load it. Saving is blocked until the link works, and the message names the way out: switch to Preset if you would rather clear the link than fix it.
An amber note about missing characters — the file loaded, but it has no characters for your widget title or subtitle. Font files are often published as one file per language, so a file that covers a different alphabet will load cleanly and still show nothing. Link the file that covers your language. This is a warning, not a block — you can still save.
Pasting a link from a document or a chat message sometimes carries an invisible trailing space. Rep AI strips those, so a good link is never reported as malformed.
The link is also re-checked each time you open the Font section, so if a hosted file is removed later, you will see it on the page without touching anything.
Where the font appears
The font you choose applies to every shopper-facing surface Rep AI renders:
The chat window — messages, titles, suggestion chips, menu shortcuts, and the input field
The chat launcher, including the text label if your button style uses one
The compact chat state shown before the window opens
Proactive messages
The "Ask our AI" search widget
The inline widgets on your product detail pages
Icons and emoji are unaffected — they keep their own symbol fonts.
Rep AI always keeps its standard font stack behind your choice. If a font cannot be loaded, or a specific character is missing from the file, that text falls back to the standard typography instead of showing empty boxes.
Tips
Keep the file small. Every shopper who opens the chat downloads the font you link. A single, well-compressed
.woff2keeps the widget quick.One file covers all weights. Presets load the regular through bold weights for you. With a custom font, browsers derive bolder text from the single file you link, so there is no need to link several.
Check your own language. If your store sells in a non-Latin script, confirm the file you link covers it — the amber warning in the Font section tells you when it does not.
Troubleshooting
The widget still shows the standard font after saving.
Open the Font section again and look for an error or warning on the Font file URL field. A link that no longer resolves, or a file without characters for your text, both result in the standard typography.
The link works in my browser but Rep AI reports it cannot be loaded.
Fonts are one of the few file types a browser will only load across sites when the host explicitly permits it. Opening the link directly proves the file exists, not that other sites may use it. Store CDNs and theme asset folders normally permit it; a custom server may need that permission enabled.
My site restricts which outside sources it may load.
Preset fonts are served from Google Fonts. If your site's content policy blocks that source, choose Custom and link a font from your own domain instead.
I want a different text size, not a different font.
The Font section controls the typeface. Text sizes stay as designed for readability across the widget's surfaces.
Related Articles
Customize Your Chat Widget Appearance: Design the Look
Customize Your Chat Widget with CSS (Enterprise)
Meet the Updated Rep AI Chat Widget (V2)