Skip to content
Landing Pages

Use fonts in HubSpot

Last updated: September 27, 2021

Applies to:

All products and plans

The fonts available for content in HubSpot depend on the type of content and the type of font. Certain default fonts are available in all content editors, while Google Fonts and custom fonts have additional restrictions, outlined below: 

Content type Font type  
  Default fonts Google Fonts

Custom fonts

 
Page - starter templates Available on the Design tab of the content editor Not available  
Page - theme templates Available in theme settings and via stylesheet Available via stylesheet  
Page - coded template Available via stylesheet or custom module Available via stylesheet  
Blog Available via stylesheet or custom module Available via stylesheet  
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 Available on the Design tab of the template editor Not available  
Custom module Available for custom modules not used in emails Available for custom modules not used in emails  
CTA  

Use default fonts

Default fonts can be used in all types of content and are designed to load on most platforms and devices. 

  • Navigate to your content:

    • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
    • Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
    • Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
    • Knowledge Base: In your HubSpot account, navigate to Service > Knowledge Base.
    • Email: In your HubSpot account, navigate to Marketing > Email.
  • Hover over your content and click Edit
  • In the content editor, click a rich text module, then highlight the text you want to edit. 
  • In the rich text toolbar, click the Font dropdown menu and select a font. The following fonts are available in rich text modules: 
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Not available in the drag and drop email editor.  

**Only available as a web font in the drag and drop email editor.

Use Google Fonts

Google Fonts are available in the content editor for pages using starter templates and themes, as well as knowledge base articles and custom modules. To use a Google font in other pages, you will need to copy the font's import code, paste it into the page's stylesheet, then apply the font with CSS rules.

Learn more about how developers can use font fields to add Google Fonts to themes and custom modules in HubSpot's developer documentation

Please note: Google Fonts cannot be selected in the font dropdown menu of the rich text editor. 

  • Navigate to fonts.google.com.
  • In the search bar, enter a font name
  • Click the font name to view a list of styles available to import.
  • Next to each style you want to import, click + Select this style
  • In the right panel, select @import in the Use on the web section. 
  • Copy the font's code: 
    • In the Use on the web section, copy the @import code without the <style> tag.
    • In the CSS rules to specify families field, copy the code for setting CSS rules. 

copy-google-font

Once you have the code from Google Fonts, you can add the font to your HubSpot content: 

Use a Google Font in a stylesheet

  • Copy the font's @import code from Google Fonts.
  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, open the stylesheet used for your content.
  • Paste the @import code into line 1 of the stylesheet. 
  • Add the code for setting CSS rules to the appropriate selectors in the stylesheet. 
add-google-fonts-imported-font-to-stylesheet
  • In the top right, click Publish or Update to take your changes live. 

Use a Google Font in a custom coded email template

Though Google Fonts are supported by Apple Mail and a few other email clients, broad support is limited and most popular email clients only support default web fonts. Learn more about selecting the default fonts used in the updated classic email editor.  
 
To add a Google Font to a custom coded email template: 
  • Copy the font's @import code from Google Fonts.
  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, open the custom coded email template.
  • In the<head> section of the template, paste the @import code between the <style>....</style> tags. 
  • In the code of the email body, add the custom font in inline styling
  • In the top right, click Update or Publish to take your changes live. 

Use a Google Font in a CTA

  • Copy Google's code for setting CSS rules for that font.
  • In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
  • Hover over a CTA, then click the Actions dropdown menu and select Edit
  • In the right panel, click Advanced options
  • In the text box, paste Google's code for setting CSS rules for that font. 
  • In the bottom right, click Next. Then click Save.

Use a Google Font in a custom module

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


  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.

click-add-field

  • In the top right, click Publish changes to take your changes live. 
  • Navigate to your content:

    • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
    • Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
    • Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
  • Hover over the content using the custom module and click Edit
  • In the content editor, click the custom module
  • 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, you can host font files in the files tool, then reference them in your stylesheet. 

Please note: custom fonts need to be applied via 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. HubSpot recommends uploading a minimum of the .woff, .ttf, & .eot versions of the font to ensure your font loads on all browser

s. You can use the Expert mode on Font Squirrel's converter tool to generate additional file formats.

  • In your HubSpot account, navigate to Marketing > Files and Templates > Files.
  • Click Upload files
  • On your computer's hard drive, select the font files, then click Open
  • Click the name of an uploaded font file. 
  • 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

Once 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

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, open the stylesheet used for your content.
  • 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. 
  • Create CSS rules with the font-family property to apply the custom font. 
  • In the top right, click Update or Publish to take your changes live. 

sample-custom-font-in-stylesheet

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.

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, open the custom coded email template.
  • 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. 
  • In the code of the email body, add the custom font in inline styling
  • In the top right, click Update or Publish to take your changes live. 

Use a custom font in a CTA

Once you've added a custom font to the files tool, you can use it in CTAs: 

  • In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
  • Hover over a CTA, then click the Actions dropdown menu and select Edit
  • In the right panel, click Advanced options
  • In the text box, paste this code: 

font-family: 'Your Font Name';

  • Replace Your Font Name with the name of the font
  • In the bottom right, click Next. Then click Save

set-custom-font-for-cta

Use a custom font in a custom module

Once you've added a custom font to the files tool, you can use it in custom modules: 

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, open the custom module.
  • In 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.
  • Create CSS rules with the font-family property to apply the custom font. 

custom-module-custom-font

  • In the top right, click Publish changes to take your changes live.