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.
- 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.
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 Content > CTA.
- 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.