Solving the Mystery: When Google Fonts Disappear on Your HubSpot Pages

Solving the Mystery: When Google Fonts Disappear on Your HubSpot Pages

Hey ESHOPMAN community! Ever poured over your HubSpot brand settings, carefully selected that perfect Google Font, applied it to your landing pages, only to publish and find it… gone? Replaced by a generic fallback font that clashes with your entire brand aesthetic? If so, you’re not alone. This is a surprisingly common and incredibly frustrating issue that recently surfaced in the HubSpot Community, and it’s something every marketer, RevOps professional, and especially those running an online store with HubSpot, needs to understand.

The HubSpot Community Conundrum: Fonts That Won't Load

The discussion started with an original poster highlighting a peculiar problem: Google Fonts weren't loading on their HubSpot landing pages. They explained that even after setting a font (like 'Figtree' in their example) as the body and primary font in Brand settings, and selecting it in the rich text editor, the font simply wouldn't appear on the live, published page. What made it even weirder? The font did load correctly when they clicked into the rich text editor itself. A real head-scratcher!

Here’s what the original poster observed:

kyleffotf_0-1780594686391.png

Image 1: Editing an affected landing page. Rich text with Google font applied is not loading. The body is using a fallback font instead.

kyleffotf_1-1780594730615.png

Image 2: Rich text loads the font immediately after clicking into the rich text editor.

They even confirmed that the page source showed font-family: "Figtree" styling applied, but the actual font download never happened on the live page. This is a crucial detail that points us in a specific direction for troubleshooting.

Why This Matters for Your E-commerce Brand

For anyone running an online store, especially those leveraging HubSpot as their CRM and sales engine, brand consistency isn't just a nice-to-have; it's fundamental. Every touchpoint, from your product pages to your marketing emails and landing pages, needs to scream 'YOUR BRAND'. Inconsistent fonts break that illusion instantly, making your site look unprofessional and untrustworthy. Imagine a potential customer landing on a beautifully designed product page from your ecommerce store builder, only to click a CTA to a landing page where the fonts suddenly change. It’s jarring, reduces trust, and can significantly impact conversion rates. Your carefully crafted brand identity relies on these details.

Diving Deeper: What the Thread Showed (and Didn't)

A HubSpot Community Moderator quickly jumped in, acknowledging the issue and noting that no similar threads had been found. They tagged a few experts, hoping for some insight. Unfortunately, the thread concluded without a definitive solution from the community itself, leaving the original poster to wonder if it was an isolated incident. This highlights a common challenge: some issues require a deeper dive than a quick forum response can provide. But don't worry, we're here to fill in the gaps!

Our Expert Take: Potential Causes & Troubleshooting Steps

Based on the original poster's detailed description – particularly the fact that the font loads in the editor but not live, and the font-family CSS is present but the font file isn't downloaded – here's what we suspect might be happening and how you can troubleshoot it.

1. CSS Overrides & Specificity

This is the most common culprit. While HubSpot's brand settings apply global styles, custom CSS added to your theme, specific templates, or even directly on the page (via the 'Advanced' tab in page settings) can override these. If you have any custom CSS that defines font-family for body tags, specific classes, or IDs with higher specificity than your global settings, it will take precedence. Look for:

  • Theme-level custom CSS: Check your theme settings in HubSpot for any custom CSS files or code blocks.
  • Page-specific custom CSS: Go to your landing page settings, navigate to the 'Advanced' tab, and check the 'Add header HTML' or 'Add footer HTML' sections for any