It’s frustrating when your site looks inconsistent even though you applied the same font styles everywhere in HubSpot. Headings may appear differently on landing pages versus blog templates. Buttons, body text, and forms sometimes adopt unexpected typefaces.
This mismatch usually comes from how fonts are defined across your HubSpot environment. Between drag-and-drop areas, custom modules, and template overrides, it’s easy to lose control of typography. Without a clear system, you end up manually tracking and correcting styles that should have applied globally.
This guide walks you through managing fonts in HubSpot, showing where typography settings live, how to apply custom or branded fonts, common pitfalls, and how to monitor consistency using HubSpot’s tools.
Set Up and Manage Fonts Across HubSpot Templates and Modules
Managing fonts in HubSpot means defining which typefaces appear on your site and how they behave across templates, modules, and landing pages. This includes fonts set globally via themes, added through CSS, or configured in the Design Manager.
Where to Find Font Settings:
- Design Manager: Customize fonts in your theme files and modules.
- Theme Settings: Marketplace or drag-and-drop themes can be accessed via Theme Settings > Typography.
These settings apply to headers, body copy, buttons, and UI components linked to the theme. Even CRM-powered content, such as smart modules, inherits global font rules.
How It Works Under the Hood
Understanding HubSpot’s font system helps maintain consistent typography.
Theme Configuration:
Your theme’s theme.json file defines font families, text sizes, and spacing. Variables from this file feed modules and templates.
Point: Managing fonts here ensures the entire site references the same specifications.
Theme Editor Settings:
Marketing > Files and Templates > Design Tools > Theme Settings lets you visually change fonts. Updates propagate across all connected pages.
Point: Provides a user-friendly control panel to lock in brand typography.
CSS and HubL Variables:
Custom templates use HubL variables like {{ theme.fonts.primary }} in CSS. These pull from theme.json for consistent styling.
Point: Supports scalable typography even in custom modules.
Font Hosting:
Fonts can be local or linked from Google Fonts or Adobe Fonts. Declare using @font-face for proper rendering.
Point: Broken references default to fallback fonts, losing brand styles.
Template-Level Overrides:
Only override fonts in templates when needed for special design cases.
Rendering Output:
When published, HubSpot compiles theme variables, layouts, and CSS into HTML. Fonts appear as browsers interpret them, so all components must reference the same sources.
Main Uses Inside HubSpot
Consistent Branding Across Pages
Centralized font control keeps HubSpot pages polished. Whether on the homepage, blog, or landing page, typography should align with the brand identity.
Mini Example:
Your organization uses Poppins for headings and Roboto for body text. Defining these in theme.json and Theme Settings > Typography ensures new pages inherit the font pair automatically.
Designing With Custom Fonts
Brands using non-standard fonts can upload them directly to the theme.
Mini Example:
A branding agency uploads the proprietary font “Acme Sans” in .woff2 and .woff formats to File Manager, declares it via @font-face in CSS, and links it in theme.json. It becomes the default for all text across the site.
Managing Font Hierarchies
Proper typography structure ensures headings, body copy, and buttons create a readable hierarchy. HubSpot’s font settings are managed from a single source.
Mini Example:
A manager adjusts H1 to 36px and H2 to 28px in Theme Settings > Typography. Updates apply across every page tied to the theme without manual coding.
Creating Campaign-Specific Variations
One-off campaigns may need different typography without affecting the main theme.
Mini Example:
For a holiday promotion, a retailer clones the theme and updates theme.json with a festive script font. This variation applies only to the campaign page, leaving the main site unchanged.
Common Setup Errors and Wrong Assumptions
- Mistake: Uploading fonts in unsupported formats
Fix: Use .woff2 and .woff and declare both in @font-face. - Mistake: Hardcoding fonts in module CSS
Fix: Use HubL variables or module fields to inherit global fonts. - Mistake: Using too many external fonts
Fix: Limit to 2-3 fonts and only necessary weights. - Mistake: Assuming all templates reflect theme updates
Fix: Verify layouts and modules inherit typography from theme files.
Step-by-Step Setup or Use Guide
- Locate Your Theme: Marketing > Files and Templates > Design Tools, open the active theme.
- Access Theme Settings: View theme.json or go to Marketing > Website > Themes > Theme Settings.
Define Font Families:
“fonts”: { “primary”: “Poppins, sans-serif”, “secondary”: “Roboto, sans-serif” } - Save and publish.
- Adjust Font Sizes and Weights: Set H1-H6 sizes, weights, line heights, and spacing.
- Upload Custom Fonts if Needed: Marketing > Files and Templates > File Manager; upload .woff2 and .woff files.
Reference Fonts in CSS:
@font-face { font-family: ‘Acme Sans’; src: url(‘{{ get_public_file_url(‘fonts/AcmeSans.woff2′) }}’) format(‘woff2’); } - Connect Fonts to Templates and Modules: Use {{ theme.fonts.primary }} instead of static values.
- Test Across Devices: Preview on desktop, tablet, and mobile for consistent display.
Measuring Results in HubSpot
Track font performance for usability, trust, and engagement.
- Review Bounce and Dwell Time: Compare pre- and post-update engagement via Traffic Analytics > Pages.
- Look for Font Errors: Website > Page Performance Reports shows console errors for font issues.
- Theme Audit Dashboard: Custom Reports > Website Data tracks template usage and theme assignment.
- Get User Feedback: HubSpot chat surveys gauge readability and clarity.
Checklist:
- Are all templates tied to the same theme?
- Do fonts load correctly on every page?
- Is page speed within acceptable limits?
- Do new pages inherit typography automatically?
Short Example That Ties It Together
A SaaS brand using HubSpot CMS Professional faced inconsistent Inter font usage.
The web team identified the active theme, added Inter via Google Fonts, updated theme.json as the primary font, and cleaned modules to use {{ theme.fonts.primary }}.
After publishing, the site displayed a cohesive font system, and HubSpot reports showed slightly lower bounce rates and improved visual consistency.
How INSIDEA Helps
INSIDEA helps teams build and manage HubSpot typography systems that improve branding and performance.
Our HubSpot-certified experts support:
- Strategic Onboarding: Configure site theme, font families, and modules from day one.
- Content and Asset Management: Keep fonts aligned across templates, forms, emails, and CTAs.
- Theme Evolution Support: Implement seasonal variations or A/B font testing.
- Data-Backed Reporting: Align visual elements with HubSpot CRM metrics.
Hire HubSpot experts through INSIDEA for HubSpot consulting services to ensure your typography is consistent, polished, and scalable.
Consistent fonts do more than improve appearance; they reinforce brand credibility. Set up your HubSpot typography correctly, keep it clean, and scale confidently.
