Using Google Fonts on Landing Pages

Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

Finding Fonts

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

1. Navigate to https://fonts.google.com/.
2. Search for a font family and click + Select this style next to each desired font family.
3. Click the View Selected Families icon in the top-right corner of the page.
4. Click @Import.
5. 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, create or edit a landing page:

1. Click    Edit Code in the left panel.
2. Click the Pages drop-down menu and select All Pages.
3. Click the Head tab.
4. Paste the copied Google Fonts code snippet into the Head tab.
5. Click Save.
   
   
    

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 Lead Gen & CRM browser tab.
4. Wrap the code snippet in brackets { }.
5. Add one of the following tags before the opening bracket:
   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; }

   •   p    •   h1    •   h2

   •   h3    •   h4    •   h5

6. Click Save and Close.