How to Use Fonts in Hubspot Website Pages

Managing fonts in Hubspot is essential for creating a consistent brand experience across all your website and landing pages. This guide explains the supported font types, how to apply them in the content editor, and how developers can configure custom fonts in theme or coded files.

The steps below are based on the official documentation so you can safely update typography without breaking your site design.

Understanding Supported Fonts in Hubspot

Before changing anything, it helps to know which font types are supported and where they are loaded from. Hubspot uses a combination of standard web fonts, Google fonts, and optional custom fonts defined in your theme or coded files.

Standard web fonts in Hubspot

Standard web fonts are considered web-safe and are available on most devices by default. They require no additional configuration and are a good choice for performance and compatibility.

Common examples of standard fonts you might see in your theme include:

• Arial
• Helvetica
• Times New Roman
• Georgia
• Courier New

These fonts are typically available out of the box in the content editor, depending on how your template or theme was built.

Google fonts in Hubspot templates

Many modern themes rely on Google Fonts to offer more design flexibility. When your theme or coded templates use Google Fonts, Hubspot will load those font files from Google’s CDN.

Important notes about Google Fonts usage:

• Fonts must be added by the developer in the theme settings or CSS.
• They will then appear as options in typography controls for that theme.
• Any changes to the font list require updating the theme or coded files.

Custom fonts added to Hubspot themes

If your brand uses a proprietary or licensed font, you can have a developer add it as a custom font in your theme. This usually involves uploading font files to the file manager and referencing them in CSS and theme settings.

Typical custom font setup steps for developers include:

1. Upload the font files (such as WOFF, WOFF2, or TTF) to the file manager.
2. Define @font-face rules in a CSS file or theme stylesheet.
3. Expose the custom font as a font option in theme settings or fields.
4. Publish the updated theme and test across major browsers.

Once configured, the custom font will be available for selection in supported typography fields in the content editor.

Where Fonts Are Controlled in Hubspot

Font behavior depends on how your site is built. In Hubspot, typography can come from themes, coded templates, or individual modules.

Hubspot themes and global typography

If your website uses a drag-and-drop theme, most font controls are centralized in the theme settings panel. This lets marketers manage consistency without editing code.

In a typical themed site:

• Global font settings handle headings, body text, and buttons.
• Changes apply across all pages using that theme.
• Font size, line height, and color are often configurable for each text level.

Because themes manage many elements at once, always confirm your brand guidelines before updating theme typography.

Hubspot coded templates and modules

Some sites in Hubspot are built with custom coded templates or modules. In these cases, developers may control fonts in CSS or via module fields.

Common patterns include:

• CSS classes that apply a specific font family to a section or module.
• Module-level settings that allow choosing from a list of predefined fonts.
• Typography tokens that map to theme or brand styles.

If you do not see the font options you expect, contact your developer or the team that built the theme or template.

How to Change Fonts in the Hubspot Content Editor

Once fonts are configured in your theme or modules, you can apply them in the content editor when editing website or landing pages.

Change fonts using rich text modules in Hubspot

Rich text modules often include a simple font selector. Available options will depend on which fonts have been defined in your design assets.

To change fonts in a rich text area:

1. Open your page in the Hubspot content editor.
2. Click the rich text module you want to edit.
3. Highlight the text whose font you want to change.
4. Use the toolbar’s font dropdown (if enabled) to select the desired font.
5. Click Update or Publish to save your changes.

Remember that some themes lock font choices for consistency, so you may not always see a font dropdown for every text area.

Update global fonts in Hubspot theme settings

For broader changes that affect many pages at once, adjust typography in the theme settings. These settings control fonts for headings, body copy, and other components.

Typical steps:

1. In your account, navigate to the design manager or theme settings area.
2. Select the active theme used by your pages.
3. Open the Typography or Fonts section.
4. Choose the desired font for headings, body text, and any other style groups.
5. Apply and publish changes so they propagate to your pages.

Because changes are global, review key page templates after publishing to ensure spacing and line breaks still look correct.

How Developers Add or Configure Fonts in Hubspot

Non-technical users handle fonts through theme settings or the editor, but developers configure the base font stack. Hubspot supports multiple approaches for advanced typography.

Adding Google Fonts to Hubspot themes

Developers can add Google Fonts by editing theme files. The documented steps typically include referencing the Google Fonts stylesheet and then using the font family in CSS or theme fields.

Basic workflow:

1. Grab the Google Fonts embed link for the chosen families.
2. Add the link to the theme’s HTML head or CSS import section.
3. Reference the font family in CSS for body and heading selectors.
4. Optionally expose it in theme settings as a selectable option.

See the official article on using fonts in Hubspot for detailed, code-level guidance: Hubspot font usage documentation.

Adding custom font files in Hubspot

For self-hosted or licensed fonts, the developer must upload and reference the font files in your design assets.

Typical implementation:

1. Upload font files to the file manager in a dedicated fonts folder.
2. Add @font-face rules in a global CSS or theme stylesheet referencing those file URLs.
3. Set global selectors (such as body, h1, h2) to use the new font family.
4. Test in major browsers and devices.

This approach keeps fonts within your Hubspot account and avoids third-party CDNs for proprietary fonts.

Best Practices for Fonts in Hubspot

Follow a few best practices to keep your pages readable, fast, and consistent with your brand.

• Limit the number of fonts. Using one primary and one secondary font is often enough.
• Check performance. Too many external font files can slow down page loads.
• Use proper fallbacks. Ensure CSS defines fallback fonts in case the primary font fails to load.
• Test responsive behavior. Confirm text remains legible on mobile, tablet, and desktop.

For broader optimization of your website strategy, including how typography impacts conversions and user experience, you can learn more from experts at Consultevo.

Next Steps for Managing Fonts in Hubspot

By understanding how fonts work in themes, templates, and modules, you can keep your Hubspot pages on-brand and easy to read. Marketers can safely adjust typography in the editor or theme settings, while developers can extend capabilities with custom or Google Fonts.

Whenever you plan a major font change, test on a staging or test page first. Then review the official documentation for technical details and updates so your implementation remains aligned with the current capabilities of the platform.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`