Articles in this section

See more

Using Google Fonts on Landing Pages

Avatar
Taylor Glass
  • Updated
Follow

SharpSpring's Landing Page Designer enables you to quickly create landing pages without having to leave your marketing automation platform.  Within the designer, you can add additional HTML, CSS, or JavaScript to provide further customization. This article will detail how to use a Google Font for text on your landing page.

Note: SharpSpring offers Professional Services to assist with custom coding. You must have code knowledge in order to use the information within this article.

The following user roles can add Google Fonts to landing pages:

  • Administrators
  • Marketing Managers 


Article Contents


Finding Fonts

To find and copy Google Fonts for use on a landing page, do the following:

  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.


Inserting Google Fonts Code

To insert copied Google Fonts code into a landing page, do the following:

  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  code.png  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.


Designating Google Fonts Code

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.
Note: If you would like all of your paragraph text to have this Google Font, the code snippet will be as follows: 
p { font-family: 'Raleway', sans-serif; }

 


Ready to Learn More?

Related articles

Comments

0 comments

Article is closed for comments.

Still didn't find what you are looking for?