Articles in this section

See more

Using Google Fonts on Landing Pages

Avatar
Leya Wood
  • 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:    
01NavMarketing.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. Open a new tab in your web browser.
  2. Navigate to https://fonts.google.com/ in that browser tab.
  3. Search for a font family and click + Select this style next to each desired font family.
  4. Click the GoogleFonts_ViewSelectedFamilies.png View Selected Families icon in the top-right corner of the page.
  5. Click @Import.
  6. Copy the entirety of the first code block, including the <style> tags.

Make sure that you do not copy anything else for the moment, as you will need to paste this code block.


Inserting Google Fonts Code

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

  1. Open another new tab in your web browser.
  2. Navigate to SharpSpring in that browser tab.
  3. Log in to SharpSpring.
  4. Click Landing Pages in SharpSpring's left toolbar.
  5. Create or edit a landing page.
  6. Click  code.png  Edit Code in the left panel.
  7. Click the Pages drop-down menu.
  8. Select All Pages.
  9. Click the Head tab.
  10. Paste the copied Google Fonts code snippet into the Head tab.
  11. 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. Insert a line before the closing </style> tag in the pasted Google Fonts code.
  2. Copy the second code snippet under CSS rules to specify families in the Google Fonts browser tab. 
  3. Paste this code snippet into the new line before the closing </style> tag in the SharpSpring browser tab.
  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.
  
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?