Add Google Fonts to pages and CTAs

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.

Please note: if you're creating content using a theme, you can choose any Google Font directly within your theme settings. All Google Fonts are also supported in starter templates in the Design tab.

Copy your Google Font's Script

First, copy the script for your desired font from Google Fonts.

• Navigate to fonts.google.com.
• In the search bar, search for the desired font name.
• Click the font name to view a complete list of styles available to import.
• Click + Select this style next to each style you want to import from this font.
• In the right panel, select the Embed tab, then select @import.
• Copy the @import script provided by Google, without the <style> tag. You'll add this script to the top of your stylesheet in your HubSpot account.
• Next, you'll apply these fonts to specific CSS selectors on your HubSpot stylesheet using the CSS rules to specify families from Google Fonts.

Add Google Font to your HubSpot pages

• In your HubSpot account, locate the stylesheet applied to your pages and open the file in your design manager.
• Paste the @import code onto the first line of your CSS file. It must be at the top of your CSS stylesheet.

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

h1 {
font-family: 'Comic Neue', cursive;
}

Add your Google Font to a CTA

You can add a Google font to a custom CTA in your account. This option isn't available for an image 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 edit, then click the Actions dropdown menu and select Edit. 
• At the bottom of the CTA editor in the right panel, click Advanced options.
• In the Custom CSS text field, paste the code from CSS rules to specify families from Google Fonts. You'll 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 to apply your changes.