CMS-General

How do I add Google Fonts to my HubSpot pages and CTAs?

Last updated: May 28, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

Google Font link tags can be applied to a specific page or across all your pages in your settings using 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 fonts.google.com and locate the desired font.
  • Click on the plus icon to the right of 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(http://fonts.googleapis.com/css?family=Open+Sans); 

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

Was this article helpful?

If you still need help you can get answers from the , or to contact support.