COS-General

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

Last updated: February 13, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Google Font link tags can be added to the Header HTML or the @import code can be added to the top of your CSS file. Before doing so, you must 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

  • Locate the stylesheet that is being applied to your pages. You can find your stylesheet in Content > Design Manager or by going to the Settings tab in the page's editor and scrolling down to the Style Settings section.
  • Paste the @import code onto the first line of your CSS file. It must be at the top of your CSS stylesheet.

  • Now that you have inserted your Google Font into your CSS file, you can call that font-family as a CSS property throughout your pages. In other words, within your custom CSS style sheet, apply the Google Font to any desired CSS selectors, as shown in the example below. 

User-added image

Add Google Fonts to your CTA

You can also use Google Fonts in your HubSpot CTAs:

  • Copy the Specify in CSS code from Google Fonts.

  • In HubSpot, navigate to ContentCTA
  • Click the gear icon to the right of the CTA, then click Edit
  • Go to the Design tab, then click Customize CSS
  • Add the Specify in CSS code from Google Fonts to the Custom CSS section on the right. 

  • Go back to the Design tab and type new text or replace the original text in your CTA to see the Google font applied. 
  • Click Update CTA