Skip to content

Use fonts in HubSpot

Last updated: May 18, 2026

Available with any of the following subscriptions, except where noted:

Fonts in HubSpot are available in different ways depending on the content type and font type. Some default fonts are available in all content editors. Web fonts and custom fonts may need to be added to theme settings, style sheets, custom modules, or coded templates.

Before you get started

Before you begin using fonts in HubSpot, review the requirements and considerations.

Permissions required A user may need additional permissions depending on where the font is being used:

Understand limitations & considerations

  • Not all content types are available in all accounts. To confirm which content types are available for your subscription, review the Product & Services Catalog.
  • Review the table below to understand which font options are available for each content type:
Content type Font type  
  Default fonts Web fonts

Custom fonts

  
Page - theme templates ✓ Available in theme settings and via stylesheet ✓  
Page - coded template ✓ Available via stylesheet or custom module Available via stylesheet  
Blog ✓ Available via stylesheet or custom module ✓  
Email Some default fonts not available in the drag and drop email editor Available for custom coded email templates only; not supported in most email clients Available for custom coded email templates only; not supported in most email clients  
Knowledge base Fonts cannot be customized in the article editor Available in theme settings  Available in theme settings  
Custom module ✓ Available for custom modules not used in emails Available for custom modules not used in emails  
CTA (legacy) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

Use default fonts in rich text modules

Default fonts are supported across HubSpot content, though the available options and where you can apply them depends on the content type.

  1. Navigate to your content:

  2. Click the name of your content.
  3. In the content editor, click a rich text module, then highlight the text you want to edit. 
  4. In the rich text toolbar, click the Font dropdown menu and select a font. The following fonts are available in rich text modules:
Default fonts
Brand fonts Merriweather
Andale Mono Monaco
Arial Symbol
Book Antiqua Tahoma
Courier New Terminal
Georgia Times New Roman
Helvetica Trebuchet MS
Impact Verdana
Lato  
Default fonts
Arial Merriweather*
Courier New Tahoma
Georgia Times New Roman
Helvetica Trebuchet MS
Lato* Verdana
*Only available as a web font in the drag and drop email editor.

 

Use web fonts

Web fonts are supported in some HubSpot content, but they aren't available in the Font dropdown menu in the rich text editor. Depending on the content type, web fonts can be applied in theme settings, stylesheets, custom modules, or coded templates. 

Developers can use the font field to add web fonts to themes and custom modules. When web fonts are added this way, HubSpot loads them directly on the content's domain instead of loading them from a third-party service.

Use third-party services such as Google Fonts by copying the font's import code, pasting it into the content's stylesheet, then applying the font through CSS:

  1. Navigate to fonts.google.com.
  2. In the search bar, enter a font name. 
  3. Click the font name to view a list of styles available to import.
  4. Click Get font in the top right.
  5. Click Get embed code in the top right.
  6. In the right column, select @import on the Web tab.
  7. Copy the @import code without the <style> tag.
  8. Copy the CSS class code for setting CSS rules. 

On the Google Fonts page, the Web tab is displayed for embedding a Google Font. A box is placed around the embed code and the Copy code button for the CSS class.

  1. After you copy the code from Google Fonts, you can add the font to your HubSpot content: 

Use a Google Font in a stylesheet

  1. Copy the font's @import code from Google Fonts.
  2. In your HubSpot account, navigate to Content > Design Manager.
  3. In the finder, open the stylesheet used for your content.
  4. Paste the @import code into line 1 of the stylesheet. 
  5. Add the code for setting CSS rules to the appropriate selectors in the stylesheet.
  6. In the top right, click Publish changes to take your changes live. 
In the design manager, a CSS file is displayed. In the code editor, a Google Font import code is at the top of the file, followed by CSS rules to appropriate selectors in the stylesheet.

Use a Google Font in a custom coded email template

Google Fonts are supported in Apple Mail and a few other email clients, but broad support is limited. Most popular email clients support default web fonts only. Learn more about selecting the default fonts used in the classic email editor. 

Subscription required Marketing Hub Professional or Enterprise subscription is required to build custom coded email templates.


To add a Google Font to a custom coded email template: 

  1. Copy the font's @import code from Google Fonts.
  2. In your HubSpot account, navigate to Content > Design Manager.
  3. In the finder, open the custom coded email template.
  4. In the<head> section of the template, paste the @import code between the <style>....</style> tags. 
  5. In the <body> section of the template, add the custom font in inline styling. 
  6. In the top right, click Publish changes to take your changes live. 

Use a Google Font in a CTA (legacy)

  1. Copy Google's code for setting CSS rules for that font.
  2. In your HubSpot account, navigate to Marketing > CTAs.
  3. Hover over a CTA, then click the Actions > Edit. 
  4. In the right panel, click Advanced options. 
  5. In the text box, paste Google's code for setting CSS rules for that font. 
  6. In the bottom right, click Next. Then, click Save.

Use a Google Font in a form

  1. In your HubSpot account, navigate to Marketing > Forms.
  2. Hover over the form name and click Actions > Edit form or Create a new form.
  3. In the form editor, click the Style & preview tab. 
  4. In the left sidebar menu, click the Style section.
  5. In the Text section, click the Font family dropdown menu and select a Google Font. 
  6. In the top right, click Update or Publish to take your changes live. 

Use a Google Font in a custom module

Please note: Google Fonts are not available for custom modules used in email templates.

  1. In your HubSpot account, navigate to Content > Design Manager.
  2. In the finder, click the name of a custom module. Learn more about creating a custom module.
  3. In the inspector, click the Add field dropdown menu in the Fields section and select Font. Learn more about working with font fields.
In the design manager, the inspector is displayed for a custom module. A box is placed around the Add field dropdown menu in the Fields section.
  1. In the top right, click Publish changes to take your changes live. 
  2. Navigate to your content:
  3. Click the name of the content using the custom module. 
  4. In the content editor, click the custom module. 
  5. In the sidebar editor, click the Font field dropdown menu and select a Google Font. 

Use custom fonts

As an alternative to using standard web fonts or using a font library like Google Fonts, upload font files, then use them in themes or reference them in stylesheets. 

Use custom fonts in themes

In the theme editor, upload a custom font, then use that font in pages and posts. Font files are supported in the following formats: TTF, OTF, WOFF.

Upload custom fonts for pages or posts

After you've uploaded custom fonts, they will be available for pages, posts, or knowledge base articles.

  1. Navigate to your content:

  2. Click the name of your content. 
  3. In the content editor, click the Edit menu and select Theme: [Name of Theme].
  4. In the left sidebar menu, click any font dropdown menu and select Manage brand fonts.
  5. Follow the steps in this Knowledge Base article to add or edit your fonts.

Upload custom fonts for knowledge base articles

After you've uploaded custom fonts, they will be available for pages, posts, or knowledge base articles.

  1. In your HubSpot account, navigate to Service > Knowledge Base.
  2. In the top right, click the Customize template.
  3. In the left sidebar, click the Design tab.
  4. In the left sidebar, click Font styles.
  5. Click any font dropdown menu and select Manage brand fonts.
  6. Follow the steps in this Knowledge Base article to add or edit your fonts.

Edit custom fonts

After you've uploaded a custom font in the theme editor, you can upload additional fonts, customize existing fonts with additional font styles, or delete fonts.

Use custom fonts in stylesheets

As an alternative to using standard web fonts or using a font library like Google Fonts, you can host font files in the files tool, then reference them in your stylesheet. 

Please note: custom fonts are only available in accounts with access to the design manager and need to be applied with CSS. Adding a custom font will not add the font to styling dropdown menus in the content editor.

To use a font in content, upload the font's files to the files tool. It's recommended to upload at least .woff, .ttf, and .eot versions of the font to ensure your font loads on all browsers. You can use the Expert mode on Font Squirrel's converter tool to generate additional file formats.

  1. In your HubSpot account, navigate to Content > Files. If you're using HubSpot's free tools, navigate to Marketing > Email. In the top right, click Email tools and select Files.
  2. Click Upload files.
  3. On your computer's hard drive, select the font files, then click Open.
  4. Click the name of an uploaded font file.
  5. In the right panel, click Copy URL to copy the URL where the file is hosted. You will need the URL for the font in each file format.

Use a custom font in a stylesheet

After you've added a custom font to the files tool, you can reference it in a stylesheet. Each font style (italics, bold, etc.) will require a separate @font-face rule. Learn more about working with stylesheets in HubSpot. 

  1. In your HubSpot account, navigate to Content > Design Manager.
  2. In the finder, open the stylesheet used for your content.
  3. For each font style: 
    • At the top of the stylesheet, paste the following code: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Replace Your Font Name with the name of the font.
    • Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
  1. Create CSS rules with the font-family property to apply the custom font. 
  2. In the top right, click Update or Publish to take your changes live. 

Use a custom font in a custom coded email template

Custom fonts aren't supported in most popular email clients. To ensure a consistent experience for your readers, using default web fonts in emails is recommended. However, if you’d like to add a custom font to a custom coded email template, you can do so once you’ve added the custom font to the files tool.

  1. In your HubSpot account, navigate to Content > Design Manager.
  2. In the finder, click the name of your custom coded email template.
  3. For each font style:
    • In the <head> section of the template, paste this code between the <style>....</style> tags: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Replace Your Font Name with the name of the font.
    • Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format. 
  1. In the code of the email body, add the custom font in inline styling. 
  2. In the top right, click Update or Publish to take your changes live. 

Use a custom font in a CTA

After adding a custom font to your theme, you can use it with CTAs.

  1. In your HubSpot account, navigate to Marketing > CTAs.
  2. In the top left, click the dropdown menu and select CTAs
  3. Hover over a CTA, then click Actions > Edit. 
  4. In the left panel of the CTA editor, click the Design tab. 
  5. Click the Styles section to expand.
  6. Click the Primary Font dropdown menu and select your custom font. 
  7. Continue creating your CTA. 

Use a custom font in a CTA (legacy)

Similar to CTAs, after uploading a custom font file, use it with legacy CTAs.

  1. In your HubSpot account, navigate to Marketing > CTAs.
  2. Hover over a CTA, then click Actions > Edit. 
  3. In the right panel, click Advanced options. 
  4. In the text box, paste this code:

    font-family: 'Your Font Name';
  5. Replace Your Font Name with the name of the font.
  6. In the bottom right, click Next. Then, click Save.

Use a custom font in a custom module

After you've added a custom font to the files tool, use it in custom blog or page modules. Learn how to add a custom font to a custom coded email template. 

  1. In your HubSpot account, navigate to Content > Design Manager.
  2. In the finder, click the name of the custom module.
  3. In the module editor, for the module.css section, paste the following code:

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

    • Replace Your Font Name with the name of the font.
    • Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
  2. Create CSS rules with the font-family property to apply the custom font. 
  3. In the top right, click Publish changes to take your changes live. 
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.
Table of contents Menu

Related content

New to HubSpot? Use these guides to get started.