Why Does the Widget Font Look Different on My Live Website?

Overview

If the font in your Feedspace widget looks different from what you expected on your live website, you are not alone, and there is a clear explanation for it. The behavior comes down to one of two straightforward scenarios: either the widget is intentionally inheriting your site’s font, or your site’s CSS is overriding the font you selected in Feedspace. This article walks you through both scenarios and shows you exactly what to do.

Why This Happens

Scenario 1: Font Family Is Set to Auto Capture

When your widget’s Font Family setting is set to Auto Capture, the widget is designed to inherit the font that your host page is already using. This is intentional behavior, not a bug. It keeps your widget looking visually consistent with the rest of your website, so the testimonials blend in naturally rather than standing out with a mismatched typeface.

If your site’s font recently changed, or if the widget is embedded on a page that uses a different font from the rest of your site, the widget will reflect that automatically. Simply check the Font Family setting in your widget’s design panel. If Auto Capture suits your needs, no action is required. If you want a consistent font regardless of the page, switch to a specific font from the dropdown instead.

Scenario 2: Your Site CSS Is Overriding the Selected Font

If you have selected a specific font in Feedspace but the widget still displays a different font on your live site, the most likely cause is that your website’s stylesheet contains a font rule with higher CSS specificity. This is common on sites that apply a global font to all elements using a broad selector such as *, body, or a parent container that wraps the widget. Because that rule is more specific than the widget’s default styles, it takes priority in the browser.

This is easy to resolve. You have two options:

• Use Custom CSS with !important: In the widget’s Custom CSS panel, add a rule that forces the font family you want. For example: .fs-widget * { font-family: 'Your Font Name', sans-serif !important; } This overrides any conflicting rule from your site’s stylesheet.
• Switch to Auto Capture: If you are happy for the widget to use whatever font your site already applies, simply set the Font Family back to Auto Capture. The widget will then inherit your site’s font naturally, and the conflict disappears entirely.

What You Can Do Next

• Open your widget in the Feedspace editor, go to the Design tab, and check the Font Family setting to confirm whether Auto Capture or a specific font is selected.
• If you want the widget to always use a particular font, select it from the Font Family dropdown and then add a Custom CSS rule with !important to prevent your site’s CSS from overriding it.
• If you prefer the widget to blend seamlessly with your site’s typography, set Font Family to Auto Capture and the widget will automatically match whatever font your page uses.
• For more advanced styling control, visit the Custom CSS guide linked in the related articles below to explore all the ways you can fine-tune your widget’s appearance.