HubSpot Guide: How to Change Font Type, Color, and Size in WordPress

If you build and optimize sites with HubSpot and WordPress, you need consistent typography across every page. Changing font type, color, and size in WordPress is simple once you know where the controls live in the editor, theme settings, and plugins.

This guide distills the original tutorial from HubSpot’s WordPress font customization article into a clear, step‑by‑step workflow you can follow on any modern WordPress site.

Why Your WordPress Fonts Matter for HubSpot Users

Whether you drive traffic from HubSpot email campaigns, CTAs, or landing pages, your WordPress typography should look polished and on brand. Fonts affect:

• Readability: clean type helps visitors scan posts and pages faster.
• Brand consistency: matching your HubSpot and WordPress fonts builds trust.
• Accessibility: proper size and contrast make content easier to read.
• Conversions: clear headings and buttons guide people to take action.

Next, you will see where to adjust fonts directly in WordPress, using the same practical approach showcased in the HubSpot tutorial.

Change Fonts in the WordPress Block Editor (Gutenberg)

The fastest way to adjust fonts on individual posts and pages is through the built‑in block editor that many HubSpot users work with daily for content creation.

Step 1: Open Your Post or Page from HubSpot Campaigns

If a WordPress page is linked from a HubSpot campaign or email, you can edit that page directly in WordPress without disrupting tracking. To open it:

1. Log in to your WordPress dashboard.
2. Go to Posts > All Posts or Pages > All Pages.
3. Click the title you want to edit.

The block editor will load all your content blocks.

Step 2: Change Font Size in a Paragraph Block

To adjust the size of a paragraph or heading:

1. Select the block you want to modify.
2. On the right sidebar, open the Block settings.
3. Find the Typography section.
4. Choose a preset size (e.g., Small, Normal, Medium, Large) or enter a custom size in pixels.

Use this method to fine‑tune content that supports your HubSpot lead‑generation funnels, such as product descriptions or blog intros.

Step 3: Change Font Color in the Block Editor

To change text color for a specific block:

1. Select the text block.
2. In the Block settings, locate Color options.
3. Choose a text color from the palette or open the color picker.
4. Set a background color if you want a highlighted effect.

Make sure the contrast stays high enough to remain accessible, especially for pages you promote through HubSpot ads or newsletters.

Step 4: Apply Font Changes to Headings and Buttons

For headings and buttons that drive conversions:

• Select the heading or button block.
• Use the same Typography and Color settings to adjust size, weight, and color.
• Keep button text large, bold, and high‑contrast so calls‑to‑action align visually with your HubSpot designs.

Use Theme Settings to Control Global Fonts with HubSpot Alignment

While single‑block changes are helpful, most HubSpot users need global typography so every new page looks consistent. WordPress themes usually provide this through the Customizer or a theme options panel.

Step 1: Open the Theme Customizer

1. In your WordPress dashboard, go to Appearance > Customize.
2. Wait for the live preview to load.
3. Look for options labeled Typography, Fonts, or Theme Options.

Each theme labels these settings differently, but the idea is the same: set rules once and have them apply site‑wide, matching the fonts you use across HubSpot assets.

Step 2: Set Global Font Families

Within Typography settings, you will usually find:

• Body font: for paragraphs and regular text.
• Heading font: for H1–H6 headings.
• Menu or navigation font: for your main menu.

Pick font families that match, or closely resemble, the ones used in your HubSpot emails and landing pages to create a seamless brand experience.

Step 3: Adjust Global Font Size and Color

Most themes let you fine‑tune sizes and colors globally:

• Set base font size for body text.
• Configure sizes for H1, H2, and H3 headings.
• Choose default text and link colors.

After you save these settings, all standard content automatically inherits them, so HubSpot‑driven visitors see consistent typography across every WordPress page.

Change Fonts Using Page Builder Plugins in a HubSpot Workflow

If your site relies on page builders such as Elementor, Beaver Builder, or Divi, you will find font options inside those tools instead of the default editor. This is common on sites that complement HubSpot landing pages with complex WordPress layouts.

Elementor Font Controls

In Elementor, you can adjust fonts as follows:

1. Edit a page with Edit with Elementor.
2. Click the widget you want to style (Heading, Text Editor, Button, etc.).
3. Open the Style tab.
4. Under Typography, change font family, size, weight, and transform.

For global settings, go to Site Settings > Typography and configure site‑wide fonts that align with your HubSpot brand guidelines.

Divi and Other Builder Font Settings

With Divi and similar builders:

• Edit the module (Text, Blurb, Button, etc.).
• Open the Design tab.
• Adjust font family, size, line height, and colors.

Align these settings with the styles you use in HubSpot templates so visitors experience a unified visual system.

Add Custom Fonts to Match HubSpot Branding

Many brands use custom or premium fonts in their HubSpot templates and want to mirror them in WordPress. You can typically add them in three ways.

Method 1: Use Theme or Builder Integrations

Some themes and builders integrate directly with Google Fonts or allow custom font uploads:

• Check Theme Options or Site Settings.
• Look for a Custom Fonts or Upload Fonts panel.
• Upload font files (often .woff, .woff2, or .ttf) and assign them to headings and body text.

Set the same typefaces here that you use in HubSpot landing pages to keep typography aligned.

Method 2: Use a Custom Fonts Plugin

If your theme does not support uploads, a custom fonts plugin can help:

1. Install a plugin that manages fonts.
2. Upload your font files inside the plugin settings.
3. Assign the new fonts through the Customizer, theme settings, or CSS.

This is particularly useful if your brand team has defined a specific type system for both HubSpot and WordPress properties.

Method 3: Add Fonts with CSS

Advanced users can load fonts by editing CSS:

1. Add @font-face declarations in a child theme or custom CSS area.
2. Host font files on your server or a CDN.
3. Apply the font family to body and heading selectors.

This method offers maximum control but requires care when updating themes so your HubSpot‑aligned typography stays intact.

Best Practices for Fonts on HubSpot and WordPress

To keep your site fast, accessible, and consistent with your HubSpot assets, follow these practices:

• Limit font families to two or three total.
• Avoid very small text; keep body copy around 16px or larger.
• Maintain strong color contrast for readability.
• Test responsive sizes on mobile and tablet.
• Preview campaign pages that receive HubSpot traffic after every typography change.

If you need strategic help aligning your WordPress typography with a broader marketing stack including HubSpot, consider consulting specialists like Consultevo for a full audit and implementation plan.

Next Steps for Your HubSpot and WordPress Stack

You have seen how to change font type, color, and size in WordPress using the block editor, theme settings, page builders, and custom fonts. Align these changes with your existing HubSpot designs so visitors experience consistent branding from the first email open to the final conversion.

For deeper visuals and specific examples inside the WordPress interface, refer back to the original HubSpot WordPress font tutorial and apply the techniques that best match your theme and workflow.

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

“`