Landing Pages
Design Manager

Add Google Fonts to pages and CTAs

Last updated: July 15, 2020

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

You can add Google Font link tags to one or all pages in your settings, or in the header HTML field. If you're comfortable editing CSS, you could add the @import code to the top of a specific CSS file.

First, obtain the Google Font script from Google:

Copy your Google Font's Script

  • Navigate to and locate the desired font.
  • Click on the plus icon + next to the font name.

  • Click on the 1 Family selected bar that appears at the bottom of the screen.
  • If you'd like to import additonal styles or weights for that font family, select the Customize tab and use the checkboxes.

  • Select the @import tab and copy the script provided by Google, e.g. @import url(; 

Now that you have copied this code, you can return to HubSpot to apply the Google Font.

Add Google Font to your HubSpot pages

  • Apply the Google Font to any desired CSS selectors, as shown in the example below. 

User-added image

Add Google Fonts to your CTA

  • Copy the Specify in CSS code from Google Fonts.

  • In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
  • Hover over the CTA you want to update with this font and click Actions > Edit
  • Click Advanced options to expand more options.
  • Add the Specify in CSS code from Google Fonts to the Custom CSS section. You will see the Google font applied to your CTA as soon as you enter this CSS. 

  • Click Next in the lower-right corner to finalize the details of your CTA, then click Save