Articles in this section

See more

Using Google Fonts on Landing Pages

Avatar
Cris Echeguren
  • 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.


Article Contents

     Available with:    
  Marketing Automation ✓  
  CRM Ultimate    
  CRM PRO    
  CRM Free    
        
  Toolbar:    
0NavMarketing.png
       
  Users:    
  Administrators ✓  
  Company Managers ✓  
  Marketing Managers ✓  
  Sales Managers    
  Salespersons    
  Jr. Salespersons    
 


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 desired font family.
  3. Click the pop-up bar at the bottom of the page.  
  4. 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 Save.
  

Click to enlarge.
Note: SharpSpring offers Professional Services to assist with custom coding.


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 closing </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 closing </style> tag.
  4. Wrap the code snippet in brackets { }.
  5. Add one of the following tags before the opening bracket:

       •   p
       •       h1
       •       h2
    		    •   h3
       •       h4
       •       h5
  6. Click Save and Close.
  

Click to enlarge.
Note: The tags before the bracket designate which header or body text will be impacted by this change.

For example, 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; }

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?