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 fonts.google.com 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(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 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.
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.
