Using Google Fonts with SharpSpring Forms

SharpSpring 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 SharpSpring forms. Article Contents Preparing Form CSS Stylesheets Setting Form Stylesheet Code	Available with:
	Marketing Automation	✓
	CRM Ultimate	✓
	CRM PRO	✓
	CRM Free	✓

	Toolbar:


	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 SharpSpring form with a stylesheet. To prepare a SharpSpring form and stylesheet, do the following:

1.	In a browser tab, log in to SharpSpring.	Click to enlarge.
2.	In SharpSpring's top toolbar, click Content > Forms.
3.	Create or edit a form.
4.	Click the Styles tab.
5.	Create or edit a stylesheet.

Setting Form Stylesheet Code

Once you have prepared a SharpSpring form and developed a stylesheet, you can insert code to specify which Google Font to use for text on your form. To set SharpSpring form stylesheet code, do the following:

1.	In a browser tab, navigate to https://fonts.google.com/.	Click to enlarge.
2.	Click the + Plus icon next to the desired font family.
3.	Click the pop-up bar at the bottom of the page.
4.	Click @Import.
5.	Copy the entirety of the Embed Code snippet, except the `<style>` tags.	Note: SharpSpring offers Professional Services to assist with custom coding.
6.	In the SharpSpring form browser tab, paste the copied snippet at the top of the form's stylesheet code.
7.	Add the CSS selector targeting the form elements that will be styled to the bottom of the form's stylesheet code. The following example code targets labels for form inputs: label { }
8.	In the Google Fonts browser tab, copy the snippet in the Specify in CSS block.
9.	In the SharpSpring form browser tab, paste the copied snippet between the `{ }` curly brackets.
10.	Click Save Stylesheet.
11.	Click Save Changes.

Articles in this section

Article Contents

Preparing Form CSS Stylesheets

Setting Form Stylesheet Code

Still didn't find what you are looking for?

Articles in this section

Article Contents

Preparing Form CSS Stylesheets

Setting Form Stylesheet Code

Related articles

Why was this help article not helpful?

Still didn't find what you are looking for?