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.
Note: SharpSpring offers
Professional Services to assist with custom coding. You must have code knowledge in order to use the information within this article.
The following user roles can add Google Fonts to landing pages:
- Administrators
- Marketing Managers
Article Contents
Setting Fonts
To set Google Fonts on a landing page, do the following:
- In a browser tab, navigate to https://fonts.google.com/.
- Click the + Plus icon next to each font family you want to use on your landing page.
- Click the pop-up bar at the bottom of the page.
- In a new browser tab, log in to SharpSpring.
- In SharpSpring's top toolbar, click
Content > Pages.
- Create or edit a landing page.
- In the left panel, click
 Edit Code.
- In the Google Fonts browser tab, in the pop-up window, click @Import.
- In the first code block, copy the second line, excluding the <style> or </style> tags.
- In the SharpSpring browser tab, paste the copied code snippet into the Edit Code menu's CSS section.
- Click Save.
- In the Google Fonts browser tab, copy the second code snippet under Specify in CSS.
- In the SharpSpring browser tab, paste this code snippet into the Edit Code menu's CSS section.
- Designate whether this font will be applied to a paragraph or header by wrapping the CSS code snippet in brackets with either p, h1, h2, h3, h4, or h5 tags.
|
|
Click to enlarge.
|
| |
|
Note: If you would like all of your paragraph text to have this Google Font, the code snippet will be:
p { font-family: 'Raleway', sans-serif; }
|
Ready to Learn More?
Comments
0 comments
Article is closed for comments.