Lead Gen & CRM
How can we help you?
Search our help articles, video tutorials, and quickstart guides

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Using Google Fonts with Lead Gen & CRM Forms

Article: 000050555
Updated: July 26, 2024

Modify the CSS stylesheet in order to use Google fonts in your form

Lead Gen & CRM forms can be edited or otherwise styled using the form stylesheet. Editing this stylesheet is another way to customize your form's code and design. You can configure this stylesheet to use specified fonts.

This article will detail how to modify CSS stylesheets to set specific Google fonts in Lead Gen & CRM forms.


Article Contents


Users:
Administrators 
Company Managers 
Marketing Managers 
Sales Managers  
Salespersons  
Jr. Salespersons  


Preparing Form CSS Stylesheets

In order to insert custom code for fonts, you will need to use a Lead Gen & CRM form with a stylesheet.

To prepare a Lead Gen & CRM form and stylesheet, create or edit a form.

  1. Click the Styles tab.
  2. Create or edit a stylesheet.

    Advanced CSS

     



Setting Form Stylesheet Code

Once you have prepared a Lead Gen & CRM form and developed a stylesheet, you can insert code to specify which Google Font to use for text on your form.

Note: Constant Contact offers Professional Services to assist with custom coding.

To set Lead Gen & CRM form stylesheet code, do the following:

  1. Open another new tab in your web browser.
  2. Navigate to https://fonts.google.com/ in that browser tab.
  3. Click+ Select this style next to the desired font family.
  4. Click the icon in the upper-right corner to view your selected family. 
  5. Click @Import.
  6. Copy the entirety of the Embed Code snippet, except the <style> tags.
  7. Return to the Lead Gen & CRM form browser tab.
  8. Paste the copied snippet at the top of the form's stylesheet code.
  9. Add the CSS selector targeting the form elements that will be styled to the bottom of the form's stylesheet code.
    Note: The following example code targets labels for form inputs:
    label {
    
    }
  10. Return to the Google Fonts browser tab.
  11. Copy the snippet in the Specify in CSS block.
  12. Return to the Lead Gen & CRM form browser tab.
  13. Paste the copied snippet between the { } curly brackets.
  14. Click Save Stylesheet.
  15. Click Save Changes.
 


Did this article answer your question?


Constant Contact Logo

Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center