Using Google Fonts on Landing Pages

Article Contents

• Finding Fonts
• Inserting Google Fonts Code
• Designating Google Fonts Code
• Ready to Learn More?

1. In a browser tab, navigate to https://fonts.google.com/.
2. Click the + Plus icon next to each font family you want to use on your landing page. 
3. Click the pop-up bar at the bottom of the page.  
4. In the Google Fonts browser tab, in the pop-up window, click @Import. 
5. Copy the entirety of the first code block, including the <style> tags.

Click to enlarge.

1. In a new browser tab, log in to SharpSpring.
2. In SharpSpring's top toolbar, click
   Content > Pages.
3. Create or edit a landing page.
4. In the left panel, click    Edit Code.  
5. Click the Pages drop-down menu.
6. Select All Pages.
7. Click the Head tab.
8. Paste the copied Google Fonts code snippet into the Head tab.
9. Click either Save or Save and Close.

Click to enlarge.

To set Google Fonts code parameters, do the following:

1. In the pasted Google Fonts code, insert a line before the </style> tag.
2. In the Google Fonts browser tab, copy the second code snippet under Specify in CSS.  
3. In the SharpSpring browser tab, paste this code snippet into the new line before the </style> tag.
4. Wrap the code snippet in brackets { }.
5. Designate whether this font will be applied to a paragraphs or headers by preceding the brackets with either p, h1, h2, h3, h4, or h5 tags.  
6. Click Save and Close.

Click to enlarge.