You choose the font and the base text size of the Olvio widget on the Appearance page. The same settings apply to the widget on your product pages, to its chat panel and to the Olvio Advisor, which is available on the Growth and Scale plans (see What is Olvio Advisor?). The Appearance page is available on every plan, once you've chosen a plan.

The card contains the Font menu and the Base font size slider.

The Font menu offers these options:

To use a font that isn't in the list, select Custom at the bottom of the menu, then type the font in the CSS font-family field that appears, for example 'Brandon Grotesque', sans-serif. End the value with a generic family such as sans-serif or serif, so the browser has a fallback. The field accepts up to 200 characters and starts with the CSS value of the font you had selected (empty if you were on Default (system)). If you leave it empty, the widget uses Default (system).

Olvio doesn't load any font files for you, whether you pick a font from the list or type your own, so the font needs to be loaded by your Shopify theme or installed on the shopper's device. Otherwise, the browser uses the next font in the value, such as a generic sans-serif or serif font, and the widget looks different from what you chose. Custom CSS can't load a font from a full web address either: when you save, Olvio removes @import rules and any address starting with http://, https:// or // inside url(), even one on your own store. To learn what Custom CSS can change, see Add custom CSS to the widget.

To match the widget to your store's text:

Move the Base font size slider between 12 and 20 px, in steps of 1 px. Its label shows the current value, and new stores start at 14 px. All text inside the widget scales from this value, so the label, the title, the suggested questions and the messages keep their proportions.

One exception: on touch screens such as phones and tablets, the text shoppers type in the question field is always 16 px. This stops the browser from zooming in when a shopper taps the field.

The Live preview next to the settings (below them on smaller screens) updates as soon as you change the font or the size. Use the Product page and Chat panel buttons above it to switch between the two views.

The preview uses the fonts available in your browser, not the fonts your theme loads, so a font can look different in the preview than on your storefront. For example, Inter always shows correctly in the preview because the Olvio admin loads it, even if your theme doesn't load Inter. The title in the preview is also slightly smaller than on your storefront.

As soon as you change a setting, the save bar appears. Click Save, and Changes saved confirms it. You can't save while a color field shows Expected format: #rrggbb, so correct that code first. Discard returns to your last saved settings. Reload a product page on your storefront to see the result. If it doesn't change, see My Appearance changes don't show on the storefront.

The Olvio — Product page block in the Shopify theme editor has a Typography override section. When you check Use custom font size for this block, that block uses its own font size instead of the one set in Appearance. The override applies to every product that uses this product template.

The override also applies to the chat panel that opens from that block. You can only override the size this way, not the font. The Live preview in Olvio doesn't show this override, so if a size you set in Appearance doesn't appear on a product page, check whether this box is checked. To find the block, see Add the Olvio widget to your product pages.